jquery动画底部问题

这很奇怪。我有一个动画，当我在一个DIV上。进入这个div，我有另一个绝对位置，我想上移，直到鼠标停留在主div上，当我离开主div时，在你的位置下降。简单的悬停效果。我已经写下了这个功能，可以很好地分开一个奇怪的错误。jquery动画底部问题

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

来源

2010-06-06 andrea

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

在下面的例子中，初始bottom位置使用data()属性为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"); 
    } 
);

来源

2010-06-06 23:43:33 user113716

谢谢！它工作得很好！ – andrea 2010-06-06 23:52:19

@andrea - 不客气。：O） – user113716 2010-06-06 23:53:18

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

来源

2010-06-06 23:51:34 CurtainDog

jquery动画底部问题

回答

相关问题