jQuery淡入'慢'立刻出现 [英] jQuery fadeIn 'slow' immediately appearing

问题描述

我正在尝试这样做，以便当您单击链接时，它会删除div（带有一些段落和文本）并插入另一个div（带有一些段落和一些文本）。我正在使用jQuery淡入淡出。当您单击链接时，原始div的淡出效果会起作用，然后我会有一个开关盒来确定淡入的内容。但是，设置为慢的fadeIn似乎是立即发生的。

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;

编辑：

因此将fadeTo更改为fadeOut后，将fadeOut中的slow更改为fast ， 有效 好吧，按照我想要的方式过渡。但是，每当我点击home时，它会将div移动到block位置（它将它吐到左下角），然后将自己推回到容器中心的正确位置。它只在我单击home而没有其他sidenav链接时执行此操作...这些都运行完全相同的代码（home只是交换机情况下的第一个）。有什么想法吗？

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?

推荐答案

如果你想在 fadeIn 之后开始 fadeTo 已完成，您将需要使用回调函数。此外，由于你正在淡化到0不透明度，只需使用 fadeOut ：

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

这篇关于jQuery淡入'慢'立刻出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！