1

好的，所以我正在尝试制作多个动画，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);
    }
});
4

1 回答 1

0

您可以为您的 onclick 动画使用自定义队列，这样它就不会受到finish()on mouseout 调用的影响，也与您在点击功能中不需要两者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);
    }
});

这是更新的小提琴

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

于 2013-09-14T06:38:59.253 回答