使用jquery淡入淡出文本

我想在页面加载2秒后淡入淡出一些文本，5秒钟后我想淡出它。小提琴here 使用jquery淡入淡出文本

我曾尝试使用下面的代码尝试：

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

问题是文本快速出现和消失。我怎样才能让它在某个时间之后出现，让它看起来有一段时间，然后使它消失？

来源

2014-10-29 user38208

通行证'4000'不是''4000'' – 2014-10-29 13:42:26

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

来源

2014-10-29 13:44:00 Shaeldon

您可以使用setTimeout函数在特定延迟时间后隐藏该文本。它会是这样的：

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

}）;

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

}

这会5秒时间后隐藏的div

来源

2014-10-29 13:46:17

首先，你应该使用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 
});

来源

2014-10-29 14:10:37 anothershrubery

这里有几个问题。

首先，您的要淡入的元素最初需要隐藏起来。
二@Shaeldon是正确的，淡入预计数字，而不是字符串

代码：

我这里假设你想延迟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

来源

2014-10-29 14:23:20

使用jquery淡入淡出文本

回答

相关问题