【发布时间】：2015-10-24 06:05:57
【问题描述】：
我正在使用 Jquery 为动画序列制作动画菜单。我试图让它等到动画停止才能开始下一个。 因此，假设您单击一个按钮，它会开始显示动画元素，并且在功能中的所有内容完成之前您不能单击另一个按钮。所以我尝试在函数的开头和结尾使用 .css('pointer-events','none') 和 .css('pointer-events','auto') ，但它似乎不起作用。按钮仍然是可点击的。有没有其他方法可以防止在动画运行时点击可点击的 div 元素？
$(document).ready(function(){
//menu buttons start animations
$('#topstickpart').delay(300).show("slide", { direction: "up" }, 700);
$('#topstickpart').effect( "bounce",{distance:6}, {times:3}, 600 );
$('#bottomstickpart').delay(500).show("slide", { direction: "down" }, 700);
$('#bottomstickpart').effect( "bounce",{distance:6}, {times:3}, 600 );
$('#biobutton').delay(300).show("slide", { direction: "left" }, 700);
$('#biobutton').effect( "bounce",{distance:6}, {times:3}, 600 );
$('#contactbutton').delay(500).show("slide", { direction: "left" }, 700);
$('#contactbutton').effect( "bounce",{distance:6}, {times:3}, 600 );
$('#portfoliobutton').delay(200).show("slide", { direction: "left" }, 700);
$('#resumebutton').delay(600).show("slide", { direction: "left" }, 700);
$('#screeners').delay(20).show("slide", { direction: "up" }, 700);
$('#biowindow').hide();
$('#screeners').effect( "bounce",{distance:1}, {times:0}, 10 );
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','none');
$('.mainpanel').delay(50).animate({width:"660px"}, function(){
$('.screencontainer').delay(10).animate({height:"236px"},function(){
$('#biowindow').fadeIn(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','auto');
});
});
});
//onclick functionality
$('#biobutton').click(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','none');
$('#biowindow, #resumewindow, #contactwindow, #dworkswindow').hide(function(){
$('.mainpanel').animate({width:"100px"}, function(){
$('.screencontainer').animate({height:"100px"}, 100, function(){
$('#screeners').hide("slide", { direction: "up" }, 300, function(){
$('.topscreen').animate({top:"-105px"});
$('#screeners').show("slide", { direction: "up"}, 300, function(){
$('.mainpanel').animate({width:"660px", paddingTop:"300px"}, function(){
$('.screencontainer').delay(10).animate({height:"236px"}, 300, function(){
$('#biowindow').fadeIn(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','auto');
});
});
});
});
});
});
});
});
$('#toppanelslide').slideUp(300,'swing');
});
$('#resumebutton').click(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','none');
$('#biowindow, #resumewindow, #contactwindow, #dworkswindow').hide(function(){
$('.mainpanel').animate({width:"100px"}, function(){
$('.screencontainer').animate({height:"100px"}, 100, function(){
$('#screeners').hide("slide", { direction: "up" }, 300, function(){
$('.topscreen').animate({top:"-315px"});
$('#screeners').show("slide", { direction: "up"}, 300, function(){
$('.mainpanel').animate({width:"800px", paddingTop:"100px"}, function(){
$('.screencontainer').delay(10).animate({height:"720px"},function(){
$('#resumewindow').fadeIn(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','auto');
});
});
});
});
});
});
});
});
$('#toppanelslide').slideUp(300,'swing');
});
$('#portfoliobutton').click(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','none');
$('#biowindow, #resumewindow, #contactwindow, #dworkswindow').hide(function(){
$('.mainpanel').animate({width:"100px"}, function(){
$('.screencontainer').animate({height:"100px"}, 100, function(){
$('#screeners').hide("slide", { direction: "up" }, 300, function(){
$('.topscreen').animate({top:"-105px"});
$('#screeners').show("slide", { direction: "up"}, 300, function(){
$('.mainpanel').animate({width:"800px", paddingTop:"300px"}, function(){
$('.screencontainer').delay(10).animate({height:"340px"},function(){
$('#dworkswindow').fadeIn(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','auto');
});
});
});
});
});
});
});
});
$('#toppanelslide').slideDown(300,'swing');
});
$('#contactbutton').click(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','none');
$('#biowindow, #resumewindow, #contactwindow, #dworkswindow').hide(function(){
$('.mainpanel').animate({width:"100px"}, function(){
$('.screencontainer').animate({height:"100px"}, 100, function(){
$('#screeners').hide("slide", { direction: "up" }, 300, function(){
$('.topscreen').animate({top:"-105px"});
$('#screeners').show("slide", { direction: "up"}, 300, function(){
$('.mainpanel').animate({width:"660px", paddingTop:"300px"}, function(){
$('.screencontainer').delay(10).animate({height:"250px"},function(){
$('#contactwindow').fadeIn(function(){
$('#biobutton, #resumebutton, #resumebutton,#contactbutton').css('pointer-events','auto');
});
});
});
});
});
});
});
});
$('#toppanelslide').slideUp(300,'swing');
});
});
【问题讨论】：
-
可以在 Question 中包含
html吗，创建 stacksn-ps , jsfiddle jttp://jsfiddle.net 来演示？ -
我建议阅读DRY
-
我会非常关心这么多嵌套的“未完成”回调功能的性能。
-
没有其他方法可以创建该动画，只能使用一长串 jquery 动画。我需要一个面板在单击的按钮上滑入，框架元素改变它们的比例和内部内容以淡入。所有这些都在单击另一个按钮时向后重复。一个问题是，一旦您在功能完成之前单击另一个按钮，一切都会变得疯狂。我需要重置所有点击动画或禁用可点击性直到完成。