0

我有这个动画http://codepen.io/DWboutin/pen/DFJze

当我快速浏览这些选项卡时，动画真的很奇怪。

我怎么能阻止它？我尝试了 .stop(true,true)，我尝试创建队列，但我可以让这个更干净。

该函数在 mouseenter 时触发

var becomeBigger = function(element){
    deplace(element.index(),function(){
        element.dequeue();
        element.queue(function(){
            $(this).animate({top: '118px', height: '435px',width: '248px'},settings.timeAnimIn,settings.easingIn,function(){
                $(this).addClass('active');
                deplace(element.index());
            });
            $(this).children('.img').children('.noiretblanc').animate({'opacity':0},settings.timeAnimIn,settings.easingIn);
            $(this).children('.img').children('.couleur').animate({opacity: 1, top: '-321px'},settings.timeAnimIn,settings.easingIn);
            $(this).children('.img').animate({height: '321px'},settings.timeAnimIn,settings.easingIn);
            $(this).children('.titre').animate({height: '57px', width: '228px', backgroundColor: '#4696a7'},settings.timeAnimIn,settings.easingIn);
            $(this).children('.titre').children('h2').animate({fontSize : '22px'},settings.timeAnimIn,settings.easingIn);
            $(this).children('.titre').children('h3').animate({fontSize : '18px'},settings.timeAnimIn,settings.easingIn);
            $(this).children('.btn-verso').css({backgroundPosition : '0 0'});
            $(this).dequeue();
        });
    });

}

这个在mouseleave上

var recoverSize = function(element){
    replace(element.index(),function(){
        element.queue(function(){
            $(this).removeClass('active');
            $(this).animate({top: '148px',height: '385px',width: '214px'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.img').children('.noiretblanc').animate({'opacity':1},settings.timeAnimOut,settings.easingOut);
            $(this).children('.img').children('.couleur').animate({opacity: 0, top: '-277px'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.img').animate({height: '277px'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.titre').animate({height: '50px', width: '194px', backgroundColor: '#959595'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.titre').children('h2').animate({fontSize : '20px'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.titre').children('h3').animate({fontSize : '16px'},settings.timeAnimOut,settings.easingOut);
            $(this).children('.btn-verso').css({backgroundPosition : '0 -72px'});
            $(this).dequeue();
        });
    });

}

谢谢你的帮助

4

2 回答 2

1

您可以使用

.stop(false, true).animate(...);

或带有 clearQueue() 的东西

http://api.jquery.com/clearQueue/

于 2013-01-15T13:57:43.277 回答
1

您需要在开始当前动画之前停止所有动画，这很容易用 jQuery 完成：

停止（）

于 2013-01-15T13:48:37.207 回答