我有这个动画http://codepen.io/DWboutin/pen/DFJze
当我快速浏览这些选项卡时,动画会产生非常奇怪的东西。
我怎样才能阻止它?我尝试了 .stop(true,true),我尝试创建队列,但我可以使其更干净。
鼠标进入时触发该函数
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();
});
});
}
感谢您的帮助
最佳答案
在开始当前动画之前,您需要停止所有动画,这使用 jQuery 很容易做到:
关于javascript - 创建一个没有重叠动画的 jquery 固定动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14339088/