javascript - jQuery在mouseout多个事件上完成

好的，所以我尝试制作多个动画，onmouseenter我有一个使用finish（）的反弹效果；在mouseout和onclick上移动位置的问题是，如果单击，然后将鼠标移出div，它会完成单击动画，我尝试使用变量，.data和其他各种方法，但不幸失败了，我正在寻找一种快速的方法。解。

这是jsfiddle：http://jsfiddle.net/FR5Lu/

这是代码

$.fx.speeds._default = 1000;

$.fn.StartBounce = function() {
    var self = this;
    (function runEffect() {
        self.effect('bounce', {distance:20}, 5000, runEffect);
    }) ();
    return this;
};

$('.iconeffect').mouseenter(function() {
            if (!$(this).is(":animated") ) {
    $(this).stop().StartBounce();
            }
});

$('.iconeffect').mouseout(function() {
    $(this).finish();
})

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        bounced = false;
        $(this).finish();
        $(this).stop(true, true).animate({ left: -50});
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {
        $(this).finish();
        $(this).stop(true, true).animate({ left: 0});
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});

最佳答案

您可以为onclick动画使用自定义队列，以使其不受鼠标移出时调用finish()的影响，而且finish()本质上与stop(true,true);相同，因此在单击功能中不需要两者：

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        $(this).finish().animate({ left: -50},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {
        $(this).finish().animate({ left: 0},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});

这是updated fiddle

请注意，使用自定义队列时，需要显式调用dequeue()以启动动画

关于javascript - jQuery在mouseout多个事件上完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18797254/