Question

我试图在页面加载后2秒钟淡化一些文本，并在5秒后我希望它淡出。小提琴here

我尝试使用以下代码：

<div id="intro-wrap">
<div id="intro-text">
        <h1 style="font-size: 20px; letter-spacing: 0.1em; font-family: serif; color: rgb(253, 236, 204); font-weight: 100;">Creating the world's most exceptional homes</h1>

</div>
</div>

$(window).on("load", function () {
$('#intro-wrap').fadeIn('4000', function () {
    // First Animation complete
    $(this).fadeOut('4000', function () {
        // Second Animation complete
    });
});
});

问题是文字很快出现并消失。如何在一段时间后使其显示，使其显示一段时间然后逐渐消失？

Answer 1

setTimeoutI改变了文本的颜色，这样你就可以更好地看到动画了，这个黄色的东西真的很恶心，对不起。

小提琴链接：http://jsfiddle.net/zbbv4z9n/9/

你首先需要隐藏你的div以使其淡化，否则它已经是他们的了。

     $(window).on("load", function () {
        $('#intro-wrap').hide();
        $('#intro-wrap').fadeIn(4000, function () {
            // First Animation complete
            setTimeout(function(){$('#intro-wrap').fadeOut(4000, function () {
                // Second Animation complete
            }); 
            },4000);// Wait for 4 Seconds before starting
        });
     });

Answer 2

您可以使用setTimeout函数在特定延迟时间后隐藏该文本。它将类似于：

$('#intro-wrap').fadeIn('4000', function () {
// First Animation complete
setTimeout(callFadeOut,5000);

}）;

function callFadeOut(){
$('#intro-wrap').fadeOut('4000', function () {
    // Second Animation complete
});

}

这将在5秒后隐藏div

Answer 3

首先，您应该使用4000代替'4000'

其次，您可以将函数链接在一起并使用delay等待指定的时间，然后再转到下一部分。所以你的jQuery看起来像：

$('#intro-wrap').fadeIn(4000, function () {
    //First animation complete
})
.delay(4000) //Wait 4 seconds
.fadeOut(4000, function () {
    // Second Animation complete
});

有关正常工作的版本，请参阅此jsfiddle。

编辑：另请注意，intro-wrap div需要设置为display:none才能使fadeIn生效。（假设是这种情况）

根据OP，你可以在链中的任何地方使用delay，所以如果你要在淡入2秒之前等待2秒，等待5秒然后在2秒内淡出，你可以使用某些东西如下所示（根据您的需要更改值）：

$('#intro-wrap')
.delay(2000) //Wait 2 secs
.fadeIn(2000, function () {
    //First animation complete
})
.delay(5000) //Wait 5 seconds
.fadeOut(2000, function () {
    // Second Animation complete
});

Answer 4

这里有几个问题。

首先，您要淡入的元素最初需要隐藏。
第二个@Shaeldon是正确的，fadeIn需要一个数字，而不是一个字符串

<强>代码：

我在这里假设你要延迟2秒，淡入4，延迟5，然后淡出4。你可以根据需要修改它。

我还使用了delay。由于您包含了JQuery库，因此您也可以使用它。

<div id="intro-wrap" style='display:none;'>

$(window).load(function () {
    $('#intro-wrap')
        .delay(2000)
        .fadeIn(4000)
        .delay(5000)
        .fadeOut(4000);
});

jsfiddle

使用jquery淡入淡出文本

4 个答案: