jQuery的 - 动画过渡的悬停中断(jQuery - Animation transition

我创建了一个div来从视口的外滑动，并把自己在原来的股利。

动画是通过将鼠标悬停触发box1 。 这将使box2代替box1 。

当鼠标离开box2 DIV，它将被再次置于视口之外。

然而，这个div内缓慢的光标移动会导致动画迅速触发。

 $(document).ready(function() {
$('.box1').mouseover(function() {
    $('.box2').stop().animate({
        top: 0
    }, 100);
}).mouseout(function() {
    $('.box2').stop().animate({
        top: '-200px'
    }, 100);
});
});

下面拨弄应该说明问题。

http://jsfiddle.net/B9wx8/

Answer 1:

不喜欢这一点，这两个元素绑定事件，这将解决这一问题

$(document).ready(function () {
    $('.box1,.box2').mouseenter(function () {
        $('.box2').stop().animate({
            top: 0
        }, 'slow');
    }).mouseleave(function () {
        $('.box2').stop().animate({
            top: '-200px'
        }, 'slow');
    });
});

DEMO

Answer 2:

你可以这样做：

var done = true;
$(document).ready(function() {
    $('.box1').mouseenter(function() {
        if (done){
            done = false;
            $('.box2').stop().animate({
                top: 0
            }, {duration: 400,
                complete: 
                    function(){
                        done = true
                    }
                 });
        }
    });
    $('.box2').mouseleave(function() {
        if (done){            
            done = false;
            $('.box2').stop().animate({
                top: -400
            }, {duration: 400,
                complete: 
                    function(){
                        done = true
                    }
                 });
        }
    });
});

因此，检查动画仍在继续，只是如果没有启动下一个

文章来源: jQuery - Animation transition interrupted by hover