Question

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(); 
});

Answer 1

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(); 
});