Question

http://jsfiddle.net/UhNHW/

我正试图让一个颜色块滑入一个小块内的现有内容后面。这很糟糕，我需要让它在同一页面上为多个实例工作。

感谢任何帮助。

Answer 1

使用mouseenter和mouseleave代替mouseover和mouseout。

当游标进入父div的另一个子元素时，会触发

mouseout。

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

滑动动画，不太完美

3 个答案: