jQuery fadeIn ‘slow’ apparaissant immédiatement

J’essaie de faire en sorte que lorsque vous cliquez sur un lien, il supprime un div (avec des paragraphes et du texte) et insère un autre div (avec des paragraphes et du texte). J’utilise jQuery pour faire disparaître ces entrées et sorties. Le fondu sortant de la div d’origine fonctionne lorsque vous cliquez sur le lien, puis j’ai un cas de commutateur pour déterminer ce qui est fondu. Cependant, le fadeIn, réglé sur ‘slow’, semble se produire immédiatement.

Voici le morceau de code pertinent (le rest n’est que d’autres cas):

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

Modifier:

Ainsi, après avoir modifié fadeTo en fadeOut et «lent» dans «fadeOut» en «rapide», cela a bien fonctionné et la transition a été souhaitée. Cependant, chaque fois que je clique sur “home”, la division se place maintenant dans une position “bloquée” (elle la crache dans le coin inférieur gauche) avant de se replacer au bon endroit au centre de mon conteneur. Cela se fait UNIQUEMENT lorsque je clique sur mon domicile et sur aucun autre de mes liens Sidenav … qui utilisent tous le même code (le foyer est le premier dans le cas du commutateur). Des idées?

Si vous voulez que le fadeIn commence après la fadeTo du fadeTo , vous voudrez utiliser une fonction de rappel. De plus, puisque vous passez à l’opacité 0, utilisez simplement 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; }); }); 

Sans voir votre code HTML, il est un peu difficile de comprendre le résultat exact que vous essayez d’atteindre, mais voici un JSfiddle avec votre code ci-dessus.

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!'); }); } }); 

De ma compréhension de ce que vous essayez de faire, je crois que vous devez simplement faire ceci:

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

(la fonction fadeIn définit automatiquement la propriété display sur inline / block)

De plus, bien que votre implémentation soit correcte, il est plus simple de faire:

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

( jsFiddle simplifié )

Il vous suffit d’append un rappel à fadeOut pour qu’il s’exécute une fois l’animation terminée:

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