jQuery fadeIn 'langsam' sofort erscheinend

Question

Ich versuche es so zu machen, dass wenn du auf einen Link klickst, entfernt er ein div (mit einigen Absätzen und Text) und fügt ein anderes div ein (mit einigen Absätzen und etwas Text). Ich verwende jQuery, um diese ein- und auszublenden. Das Ausblenden des ursprünglichen Div funktioniert, wenn Sie auf den Link klicken, und dann habe ich einen Schalter, um zu bestimmen, was eingeblendet wird. Das auf "langsam" eingestellte FadeIn scheint jedoch sofort zu erfolgen.

Hier ist der relevante Teil des Codes (der Rest ist nur andere Fälle):

$(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 nach fadeTo zu fadeOut ändern und "langsam" in den fadeOut Wechsel zu „schnell ", es hat gut funktioniert und den Übergang gemacht, wie ich es möchte. Wenn ich jedoch jetzt auf "home" klicke, wird das div in eine "block" -Position bewegt (es spuckt es in die untere linke Ecke), bevor es sich wieder an die richtige Stelle in der Mitte meines Containers schiebt. Es tut dies nur, wenn ich nach Hause klicke und keine anderen meiner SideNav-Links ... die alle denselben Code haben (Home ist nur der erste im Switch-Fall). Irgendwelche Ideen?

Answer 1

Von meinem Verständnis von dem, was Sie zu tun versuchen, ich glaube, Sie dies einfach tun muss:

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

(die fadeIn Funktion stellt automatisch die display Eigenschaft Inline/Block)

Auch , während die Implementierung korrekt, dann ist es einfacher zu machen:

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

(simplified jsFiddle)

Answer 2

Ohne Ihren HTML-Code zu sehen, ist es etwas schwierig, das genaue Ergebnis zu verstehen, das Sie erreichen möchten, aber hier ist ein JSfiddle mit Ihrem Code oben.

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

Wenn Sie die fadeIn beginnen soll, nachdem die fadeTo abgeschlossen ist, werden Sie eine Callback-Funktion verwendet werden soll. da Sie auch, sind auf 0 Opazität Fading, benutzen Sie einfach 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

Sie müssen nur einen Rückruf fadeOut hinzufügen, so dass er ausgeführt wird, nachdem die Animation erfolgt:

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

    });