jQuery淡入效果'slow'参数导致立即出现

Question

我正在尝试点击链接时删除一个包含几个段落和文字的div，并插入另一个包含几个段落和一些文本的div，我使用jQuery淡入淡出这些效果。当您单击链接时，原始div的淡出效果可以正常工作，然后我使用switch语句来确定要淡入的内容。然而，设置为“slow”的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”后，它可以正常工作并以我想要的方式进行过渡。 但是，现在每当我点击“主页”时，它会将div移动到“块”位置（它会将其吐出到左下角），然后将自己推回容器中心的正确位置。 它只会在我点击主页时而不是其他任何侧边栏链接时这样做... 这些链接都运行完全相同的代码（主页只是switch case中的第一个）。 有什么想法？

- Alex Schiff

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

- Sam Selikoff

Answer 2

根据我对你所尝试做的事情的理解，我认为你只需要这样做：

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

（fadeIn 函数会自动设置 display 属性为 inline/block）

另外，虽然你的实现是正确的，但更简单的方式是这样的：

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

(简化版 jsFiddle)

- David Chouinard

---

上面更新了描述，使用fadeOut和“fast”使过渡效果正常工作，但现在div在变成内联元素之前会短暂地变成块定位？ - Alex Schiff

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

- floatleft

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;

    });

- nathancahill