淡入淡出文本循環 - jQuery

我有兩個引號包裹在H2標記中，我想淡入和淡出使用jQuery。當頁面加載時，我想要第一個報價淡入，延遲幾秒鐘並淡出，然後下一個報價做同樣的事情。我希望它繼續循環兩個引號。任何幫助將不勝感激。淡入淡出文本循環 - jQuery

2012-08-22 Tyler Almond

你可以做這樣的：

CSS：

.quotes {display: none;}

HTML：

<h2 class="quotes">first quote</h2> 
<h2 class="quotes">second quote</h2>

的Javascript：

// code gets installed at the end of the body (after all other HTML) 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})();

工作演示：http://jsfiddle.net/jfriend00/n4mKw/

此代碼適用於任意數量的引號，而不僅僅是兩個。如果引號後面有內容，則可能需要修復引號所在的容器大小，以便從一個引號跳轉到另一個引號時不會更改大小（導致其他頁面內容跳轉）。

來源

2012-08-22 01:45:43 jfriend00

當我添加腳本時，我的頁面正在加載空白。我在頁面上有一堆其他項目沒有加載。 –

@TylerAlmond - 當我看不到你所做的事情時，我該如何幫助你解決這個問題？顯然，你有某種腳本或HTML錯誤。發佈一個鏈接到你已經完成或在錯誤控制檯中查看，看看你有什麼錯誤，以便你可以修復它們。這個概念在正確執行時有效。僅供參考，上面的腳本在頁面的''部分末尾的'

這就是你需要得到上面的腳本工作。首先，你需要引用apropriate jQuery框架，所以無論是在<head>部分，或在<body>標籤結束後，所有其他元素添加此腳本標籤：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

然後，主JavaScript必須在上述<script>標籤後加載：

<script type="text/javascript"> 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})(); 
</script>

來源

2013-10-30 09:10:09 Kudzai

相關問題

淡入淡出文本循環 - jQuery

回答

相關問題