Jquery动画底层问题

时间:2010-06-06 23:29:21

标签: jquery jquery-animate

很奇怪。 我有一个动画,当我在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的方法。 谢谢你的帮助

2 个答案:

答案 0 :(得分:5)

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

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

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

inside

答案 1 :(得分:0)

在这种情况下,我不认为你可以使用相对( - = 30px和+ = 30px)值,因为动画可以在任意点停止,这会抛出其后的动画。最好在匹配集上调用each(),计算正确的偏移量并将值直接传递给悬停函数。