jQuery fadeIn 'slow' natychmiast pojawia się

Question

Próbuję zrobić tak, aby po kliknięciu łącza usunięto element div (z niektórymi akapitami i tekstem) i wstawiono inny element div (z niektórymi akapitami i tekstem). Używam jQuery, aby zanikać te wejścia i wyjścia. Wygaszenie oryginalnego elementu div działa po kliknięciu łącza, a następnie mam obudowę przełącznika, aby określić, co jest wyblakłe. Jednak fadeIn, ustawiony na "wolny", wydaje się być natychmiastowy.

Oto odnośny fragment kodu (reszta jest po prostu inne przypadki):

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

Więc po zmianie fadeTo do wyciszenia i zmiana „wolno” w wyciszenia na „szybki ", działało dobrze i zmieniało się tak, jak chcę. Jednak za każdym razem, gdy kliknę teraz "home", przesunie div do pozycji "block" (spluwa do lewego dolnego rogu), zanim wróci do właściwego miejsca w środku mojego kontenera. Robi to TYLKO wtedy, gdy klikam na dom i nie ma żadnych innych moich linków sidenav ... które działają z tym samym kodem (dom jest po prostu pierwszy w przypadku przełącznika). Jakieś pomysły?

Answer 1

Z mojego zrozumienia, co chce zrobić, wierzę, po prostu trzeba to zrobić:

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

(funkcja fadeIn automatycznie ustawia właściwość display do inline/blok)

także , natomiast implementacja poprawne, to prostsze do zrobienia:

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

(simplified jsFiddle)

Answer 2

Nie widząc kodu HTML, trudno jest zrozumieć dokładny wynik, jaki próbujesz osiągnąć, ale tutaj jest JSfiddle z powyższym kodem.

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

Jeśli chcesz fadeIn rozpocząć po fadeTo zakończy, będziemy chcieli, aby korzystać z funkcji zwrotnej. Ponadto, ponieważ jesteś blaknięcie do 0 kryciem, wystarczy użyć 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

Wystarczy dodać do wywołania zwrotnego fadeOut tak, że wykonuje po animacja jest zrobione:

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

    });