Question

我创建了一个从视口外部滑入的div，并将其自身放在原始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 - 由悬停中断的动画转换

2 个答案:

DEMO