CODEWITHSUNDEEP
jqueryhtmlcss
Nebular Dust
Nebular Dust

Reputation: 403

Disable clickable div until function is executed.

I'm working on animated menu using Jquery for animation sequences. And I'm trying to make it wait until animation stops in order to start the next one. So let's say if you click one button it starts bringing up animated elements and you can't click another buttons until everything in the function is completed. So I tried using .css('pointer-events','none') and .css('pointer-events','auto') in the beginning and the end of function, but it doesn't seem to be working. Buttons are still clickable. Is there any other way to prevent clickable div element from being clicked on, while animation is running? 

$(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');

});





});

Upvotes: 1

Views: 253

Answers (2)

guest271314
guest271314

Reputation: 1

Try using .is() , :animated selector , .off() . 

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)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>click 1</div>
<div>click 2</div>
<div>click 3</div>

Upvotes: 1

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

At first glance I would suggest you to prevent the default behaviour on click 

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

and when it's done you can make the opposite

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

Cheers!

Upvotes: 0

Related Questions