jQuery fadeIn 'slow' immediately appearing

问题

I'm trying to make it so that when you click a link, it removes a div (with some paragraphs and text) and inserts another div (with some paragraphs and some text). I'm using jQuery to fade those in and out. The fading out of the original div works when you click the link, and then I have a switch case to determine what gets faded in. However, the fadeIn, set to 'slow', appears to be occurring immediately.

Here's the relevant piece of code (the rest is just other 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 after changing fadeTo to fadeOut, and changing "slow" in the fadeOut to "fast", it worked well and transition the way I want. However, whenever I click "home" now it will move the div to a "block" position, (it spits it to the lower left corner) before shoving itself back into the right spot in the center of my container. It ONLY does this when I click home and no other of my sidenav links...which are all running the exact same code (home just is the first one in the switch case). Any ideas?

回答1:

If you want the fadeIn to start after the fadeTo has completed, you'll want to use a callback function. Also, since you're fading 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;
    });
});

回答2:

Without seeing your HTML, it's a little difficult to understand the exact outcome you're trying to achieve, but here is a 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!');
            });
    }
});

回答3:

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

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

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

Also, while your implementation correct, it's simpler to do:

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

(simplified jsFiddle)

回答4:

You just need to add a callback to fadeOut so that it executes after the animation is done:

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

    });

来源：https://stackoverflow.com/questions/16888938/jquery-fadein-slow-immediately-appearing

标签

javascript

jquery

switch-statement

fadein