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。我想我错过了解决这个错误的东西。感谢您的帮助

Answer 1

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

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

实例: 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");
    }
);​