簡單的JQuery淡出股票

我已經看過多個代號，它們都遠遠加權。我使用了一個非常簡單的fadeIn（）fadeOut（）JQuery代碼來顯示標題的元素列表。簡單的JQuery淡出股票

<li>Story 1</li> 
<li>Story 2</li> 
<li>Story 3</li> 
<li>Story 4</li> 
<li>Story 5</li>

我看着下一個功能，但我不知道如何讓它顯示我想要的元素。所以我追求的很簡單。所有它需要的是一個淡出和循環淡入的時間間隔。

來源

2011-03-24 Robin Knight

我做了一個非常簡單的推子，重量很輕。用它的圖像，但改變了它的div：

腳本

var aniSpd01 = 1000; 
var fadeSpd01 = 1000; 

$(function() { 
    var startIndex = 0; 
    var endIndex = $('#aniHolder div').length; 
    $('#aniHolder div:first').fadeIn(fadeSpd01); 

    window.setInterval(function() { 
    $('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01); 
     startIndex++; 
     $('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01); 

     if (endIndex == startIndex) startIndex = 0; 
    }, aniSpd01); 
});

HTML

<div id="aniHolder"> 
    <div>Story 1</div> 
    <div>Story 2</div> 
    <div>Story 3</div> 
</div>

CSS

#aniHolder {width:640px; height:480px; } 
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}

來源

2011-03-24 13:55:33

如果你想刪除淡入淡出過渡，以避免背景...只是刪除使用的.delay。 – 2011-03-24 13:59:12

我想你需要設置startIndex爲-1，如果我是正確的！ – vkampouris 2013-04-03 15:55:27

嘗試了jQuery插件Cycle;我用它來創建一組簡單的旋轉文本鏈接，還有一個「lite-min」版本，如果您只需要基本的功能和效果，它可以保持良好和精益。

來源

2011-03-24 13:57:00 Nick

未經測試。這只是簡單地重新安排在當前一個完成後的下一個元素上淡出/淡入，這些鏈接在一起。

function fadeTicker($collection, $elem, interval) 
{ 
    var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length)); 
    $(elem).fadeOut(function() { 
      $(next).fadeIn(function() { 
       setTimeout(function() { 
         fadeTicker($collection, $next, interval); 
        }, 
        interval 
       ); 
      }); 
    ); 
);

用作：

$(function() { 
    fadeTicker($('li'), $('li:first'), 5000); 
}

來源

2011-03-24 14:02:01 tvanfosson

的jQuery WebTicker也是旋轉文本鏈接一個非常不錯的選擇;同時讓您完全控制旋轉方向和速度;它還允許使用CSS的顏色和大小的靈活性。股票代碼允許不停止旋轉，一旦你到達最後一個項目，第一個會馬上開始。

來源

2011-12-08 21:01:25

簡單的JQuery淡出股票

回答

相關問題