jquery动画底部问题答案

【问题标题】：Jquery animate bottom problemjquery动画底部问题
【发布时间】：2010-06-06 23:29:20
【问题描述】：

这很奇怪。我有一个动画，当我 .hover 在 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 甚至超出了主 div。我认为我想念一些东西来解决这个错误。感谢您的帮助

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

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

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

现场示例： 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");
    }
);

【讨论】：

【解决方案2】：

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

【讨论】：