Jquery动画底层问题

Question

真奇怪.我有一个动画,当我在DIV上播放时开始.进入这个div我有另一个绝对的位置,我想向上移动,直到鼠标停留在主div上,当我离开主div时,你的位置下降.简单的悬停效果.我写下了这个功能,它可以很好地解决一个奇怪的错误.

         var inside = $('.inside')

         inside.hover(function() {
             $(this).children(".coll_base").stop().animate({
               bottom:'+=30px'
             },"slow")
          }, function() {
             $(this).children(".coll_base").stop().animate({
               bottom:'-=30px'
             },"slow");
          });

我需要+ = 30和 - = 30,因为我必须将此函数应用于具有不同底部的div范围.问题在于,如果我将鼠标悬停在div之外,那么DIV将会生效,但是当它下降时,他会降低每个动画的底部值.如果我从主div上下来,我看到动画div甚至超出了主div.我想我想念一些东西来解决这个bug.谢谢你的帮助

Answer 1

如果bottom不是0最初,那么您可以存储初始底部值,并在第二个函数中使用它.(如果bottom是0,那么只需使用它.)

在下面的示例中,bottom使用data()属性for 存储初始位置inside,然后在第二个处理程序中检索它以返回到原始位置.

实例: http ://jsfiddle.net/VAsZZ/

var inside = $('.inside');

inside.hover(
    function() {
        if(!inside.data('bottom')) {
            inside.data('bottom',$(this).children(".coll_base").css('bottom'));
        }
        $(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow")
    }, 
    function() {
        $(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow");
    }
);?