CODEWITHSUNDEEP
jquery
Andy Holmes
Andy Holmes

Reputation: 8047

.hide() works but then shows previous animation?

I have an issue where my animations work perfectly, however when the .hide(); is triggered it just reverts back to the slideDown(); function.

I'm scratching my head over it, though i'm assuming it's running the animation because the previous click is still active?

$('div.SocialShareJob').on('click', function(){
    $(this).find('p').slideUp(300).fadeOut(500);
    $(this).find('.Icons').slideDown(500).fadeIn(900);
});
$('div.CloseSharing').on('click', function(){
    $(this).parent('div.Icons').hide(); 
});

Upvotes: 2

Views: 62

Answers (1)

Kelvin
Kelvin

Reputation: 5287

You'll need to stop the animations that haven't completed, and clear the queue:

$('div.CloseSharing').on('click', function(event){
    $(this).parent('div.Icons').stop(true).hide(); 
});

If the closeSharing div is a child of the other one, you may also need to stop the click event from propagating to the parent. To do this, add event.stopPropagation() to the start of the event handler:

$('div.CloseSharing').on('click', function(event){
    event.stopPropagation();
    $(this).parent('div.Icons').stop(true).hide(); 
});

Upvotes: 4

Related Questions