使用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淡入淡出文本

回答

相關問題