JQuery fadeIn 'slow' appears immediately

Question

I'm trying to make sure that when the link is clicked, the div (with some paragraphs and text) is deleted and the other div is inserted (with some paragraphs and some text). I use jQuery to fade them out. The attenuation of the original div works when you click on the link, and then I have a switch case to determine what fades. However, fadeIn set to "slow" seems to happen immediately.

Here's the corresponding code snippet (the rest are just different cases):

$(document).ready(function() { $('.nav-link').click(function() { var linkClicked = $(this).attr("id"); $('.content').fadeOut('fast'); switch(linkClicked) { case 'home': console.log("linkClicked = "+linkClicked); $('#home-content').fadeIn('slow', function() { $(this).css("display", "inline"); $(this).css("opacity", 100); }); break; 

Edit:

So, changing fadeTo to fadeOut and changing “slow” in fadeOut to “fast”, it worked fine and switched as I want. However, whenever I press “home”, now it moves the div to the “block” position (he spits it out in the lower left corner) before sitting back in the right place in the center of my container. It ONLY does this when I click on a house, and none of my other sidenav links ... that all work with the same code (the house is just the first in the case of a switch). Any ideas?

Answer 1

If you want fadeIn start after fadeTo completes, you need to use the callback function. Also, since you fade to 0 opacity, just use fadeOut :

 $(document).ready(function() { $('.nav-link').click(function() { var linkClicked = $(this).attr("id"); $('.content').fadeOut('slow', function() { // this code will begin once fadeTo has finished switch(linkClicked) { case 'home': console.log("linkClicked = "+linkClicked); $('#home-content').fadeIn('slow', function() { $(this).css("display", "inline"); $(this).css("opacity", 100); }); break; }); }); 

Answer 2

From my understanding of what you are trying to do, I believe that you just need to do this:

 $('#home-content').fadeIn('slow'); 

( fadeIn function automatically sets the display property to a row / block)

Also, although your implementation is correct, it is easier to do:

 $('.content').fadeOut('slow'); 

( simplified jsFiddle )

Answer 3

Without seeing your HTML, it’s a little difficult to understand the exact result you are trying to achieve, but here is JSfiddle with your code above.

http://jsfiddle.net/W9d6t/

 $('.nav-link').click(function() { var linkClicked = $(this).attr("id"); //$('.content').fadeTo('slow', 0); switch(linkClicked) { case 'home': console.log("linkClicked = "+linkClicked); $('#home-content').fadeIn('slow', function() { $(this).css("display", "block"); alert('All done!'); }); } }); 

Answer 4

You just need to add the callback to fadeOut so that it runs after the animation finishes:

 $(document).ready(function() { $('.nav-link').click(function() { var linkClicked = $(this).attr("id"); $('.content').fadeOut('slow', function() { switch(linkClicked) { case 'home': console.log("linkClicked = "+linkClicked); $('#home-content').fadeIn('slow', function() { $(this).css("display", "inline"); $(this).css("opacity", 100); }); break; });