Jquery 滑动动画，不是很完美

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

---

非常感谢您的帮助。

请使用

mouseenter

和

mouseleave

而不是

mouseover

和

mouseout

---

当光标进入父分区的另一个子元素时，会触发

mouseout

。

使用

mouseenter

和

mouseleave

而不是

mouseover

和

mouseout

---

当光标进入父div的另一个子元素时，

mouseout

被触发。

像这样使用mouse leave

   $('.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);
          });
  });

---

像这样使用鼠标左键

   $('.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);
          });
  });

这是你想要的吗

我基本上添加了一个检查

.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);
    });
});​

这是你想要的吗

我基本上添加了一个检查

.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);
    });
});​

---

我已经更新了：）我已经更新了：）知道如何处理同一页面上的多个实例吗？我知道我需要一个（.$this）。你知道如何处理同一页面上的多个实例吗？我知道我需要一个（.$这个）地方。