CODEWITHSUNDEEP
javascriptjquerycss
J82
J82

Reputation: 8457

Hide one element while another is showing?

I need a way to hide one element (.close-button) while another (#loading-animation) is showing. How can I use conditionals in jQuery to achieve this?

Something like:

while ($('#loading-animation').show(100);) {
    $('.close-button').hide();
}

Obviously that doesn't work, but how can I format it correctly?

Upvotes: 0

Views: 75

Answers (2)

Banana
Banana

Reputation: 7463

if your animation is performed with CSS (eg, css transitions)

then you can monitor the transition end event with this:

$('.close-button').hide();
$("#loading-animation").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){ 
    //this will run when the css transitions on your #loading-animation end
    $('.close-button').show();
}).show();

or you can perform the animation using jQuery animate:

$('.close-button').hide();
$("#loading-animation").animate({
    //do your transitions here
    //"left":"+=200"
}).promise().done(function(){
    //this will run when animate is done
    $('.close-button').show();
});

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

Use the complete callback of show( [duration ] [, complete ] )

 $('.close-button').hide();
 $('#loading-animation').show(100, function(){
       $('.close-button').show();
 });

All jQuery animations have a complete callback option

Reference: show() Docs

Upvotes: 2

Related Questions