jQuery fadeIn' slow'立即出现

问题描述

我正在尝试做到这一点，以便当您单击链接时，它会删除一个div(带有某些段落和文本)，并插入另一个div(带有某些段落和文本).我正在使用jQuery淡入淡出它们.当您单击链接时，原始div的淡出效果将起作用，然后我有一个开关盒来确定淡入的内容.但是，设置为"slow"的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;

因此，在将fadingTo更改为fadeOut，并将fadeOut中的慢速"更改为快速"后，它运行良好并转换了我想要的方式.但是，每当我单击主页"时，它将div移到块"位置(将其吐到左下角)，然后再将其推回到容器中心的正确位置.仅当我单击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 fadeIn' slow'立即出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！