jquery - 滑动动画，不太完美

Question

http://jsfiddle.net/UhNHW/

我试图让一个色块滑入一个小块内的现有内容后面。它有问题，我需要让它在同一页面上的多个实例上工作。

任何帮助表示赞赏。

Answer 1

使用mouseenterandmouseleave代替mouseoverand mouseout。

mouseout当光标进入父 div 的另一个子元素时触发。

Answer 2

这是你想要的吗？

http://jsfiddle.net/UhNHW/20/

我基本上添加了一个检查是否.box2正在动画，如果是，则不带任何内容返回。

$(function() {
    $('.container').on('mouseenter', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 0
        }, 150);
    });
    $('.container').on('mouseleave', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 40
        }, 150);
    });
});​

Answer 3

像这样使用鼠标离开

   $('.container')
       .mouseover(function (){
            $('.box2').stop(true, true).animate({top:0}, 150);
       })
       .mouseleave(function (){
            $('.box2').stop(true, true).animate({top:40}, 150);
       })
       ;

对于更多实例，试试这个

  $('.container').each(function() {
      var c = $(this);
      var box = c.find('.box2');

      c.          
          mouseover(function (){
            box.stop(true, true).animate({top:0}, 150);
          })
          .mouseleave(function (){
            box.stop(true, true).animate({top:40}, 150);
          });
  });