Question

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

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

$(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只是交换机情况下的第一个）。有什么想法吗？

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

Answer 2

根据我对你要做的事情的理解，我相信你只需要这样做：

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

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

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

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

（simplified jsFiddle）

Answer 3

如果没有看到你的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!');
            });
    }
});

Answer 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;

    });

jQuery淡入'慢'立刻出现

4 个答案: