jQuery fadeIn 'slow' appare immediatamente

Question

Sto cercando di fare in modo che quando fai clic su un link, rimuovi un div (con alcuni paragrafi e testo) e inserisca un altro div (con alcuni paragrafi e del testo). Sto usando jQuery per dissolvere quelli dentro e fuori. Lo svanire del div originale funziona quando fai clic sul link, e poi ho un caso switch per determinare che cosa viene sbiadito. Tuttavia, sembra che il fadeIn, impostato su 'slow', si verifichi immediatamente.

Ecco il pezzo rilevante del codice (il resto è solo altri casi):

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

Così, dopo aver cambiato fadeTo a fadeOut, e cambiando "lento" nella fadeOut a "fast ", ha funzionato bene e ha cambiato il modo in cui voglio. Tuttavia, ogni volta che clicco su "home" ora sposterò il div in una posizione di "blocco", (lo sputa nell'angolo in basso a sinistra) prima di spingerlo nuovamente nel punto giusto al centro del mio contenitore. Lo fa SOLO quando clicco su home e nessun altro dei miei collegamenti sidenav ... che hanno tutti lo stesso codice esatto (home è solo il primo nel caso switch). Qualche idea?

Answer 1

Dalla mia comprensione di ciò che si sta cercando di fare, credo che semplicemente bisogno di fare questo:

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

(la funzione fadeIn imposta automaticamente la proprietà display inline/blocco)

anche , mentre l'implementazione corretta, è semplice da fare:

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

(simplified jsFiddle)

Answer 2

Senza visualizzare il codice HTML, è un po 'difficile capire il risultato esatto che stai cercando di raggiungere, ma qui c'è un JSfiddle con il tuo codice sopra.

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 3

Se si desidera che il fadeIn da avviare dopo la fadeTo ha completato, ti consigliamo di utilizzare una funzione di callback. Inoltre, dal momento che stai dissolvenza a 0 l'opacità, basta usare 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 4

Hai solo bisogno di aggiungere un callback per fadeOut scopo di essere eseguito dopo l'animazione è fatto:

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

    });