Question

我正在使用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');

});





});

Answer 1

尝试使用3.0 4.5 6.0 7.5 9.0，.is()选择器:animated。

＆＃13;

.off()

＆＃13;

var elems = $("div");
// only one `div` element at a time should be animated,
// on `click` event of any `div` element 
// if `this` is not currently animated , or another `div` currently animated
function fx() {
  console.log($(this).is(":animated"));
  // if `this` is not currently animated, do stuff
  // remove `click` event from `elems`,
  // call `.animate()` on `$(this)` jQuery object
  !$(this).is(":animated") && elems.off("click", fx) && $(this).animate({
    fontSize: "+=20"
  }, 2000, function() {
    // when animation complete re-attach `click` event to `elems`
    elems.click(fx)

  })
}

elems.click(fx)

＆＃13;

Answer 2

乍一看，我建议您阻止点击

上的默认行为

jQuery('body').on('click', 'button.selector', function(e){ 
e.preventDefault();
})

当它完成时你可以做相反的

jQuery('body').on('click', 'button.selector', function(e){ 
return true;
})

干杯！

禁用可点击的div直到执行功能。

2 个答案: