jQuery fadeIn 'slow' 立即出现答案

【问题标题】：jQuery fadeIn 'slow' immediately appearingjQuery fadeIn 'slow' 立即出现
【发布时间】：2013-06-03 01:28:01
【问题描述】：

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

这是相关的代码（其余只是其他情况）：

$(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 中的“慢”更改为“快速”之后，它运行良好并按照我想要的方式过渡。但是，现在每当我单击“home”时，它都会将 div 移动到“block”位置（它会将其吐到左下角），然后再将其自身推回容器中心的正确位置。只有当我单击主页并且没有其他 sidenav 链接时它才会这样做……它们都在运行完全相同的代码（主页只是 switch 案例中的第一个）。有什么想法吗？

【问题讨论】：

标签： javascript jquery switch-statement fadein

【解决方案1】：

如果您希望fadeIn 在fadeTo 完成后启动，您需要使用回调函数。此外，由于您的不透明度为 0，请使用 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】：

没有看到您的 HTML，很难理解您想要实现的确切结果，但这里有一个 JSfiddle，上面有您的代码。

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】：

根据我对您正在尝试做的事情的理解，我相信您只需要这样做：

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

（fadeIn 函数自动将display 属性设置为内联/块）

此外，虽然您的实现正确，但操作起来更简单：

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

(simplified jsFiddle)

【讨论】：

更新了上面的描述，使用淡出和“快速”使转换工作，但现在 div 在返回内联之前短暂更改为块定位？

【解决方案4】：

你只需要给fadeOut添加一个回调，让它在动画完成后执行：

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

    });

【讨论】：