简单的 JQuery 淡入淡出代码答案

【问题标题】：Simple JQuery Fade ticker简单的 JQuery 淡入淡出代码
【发布时间】：2011-03-24 13:50:24
【问题描述】：

我查看了多个代码，它们的权重都很大。我正在使用一个非常简单的 fadeIn() fadeOut() JQuery 代码来获取要显示标题的元素列表。

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

我查看了下一个函数，但我不知道如何让它显示我想要的元素。所以我追求一些非常简单的东西。它所需要的只是一个循环淡出和淡入的间隔。

【问题讨论】：

标签： jquery jquery-ui ticker

【解决方案1】：

我做了一个非常简单的推子，重量很轻。将其用于图像，但将其更改为 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;}

【讨论】：

如果你想去掉淡入淡出的Transition来避开背景...只要去掉使用的.delay即可。

【解决方案2】：

试试 jquery Cycle 插件；我用它来创建一组简单的旋转文本链接，如果你只想要基本的功能和效果，有一个“lite-min”版本可以让它保持美观和精简。

【讨论】：

【解决方案3】：

未经测试。这只是将链接在一起的淡出/淡入重新安排在当前元素完成后的下一个元素上。

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

【讨论】：

【解决方案4】：

jQuery WebTicker 也是旋转文本链接的一个很好的替代方案；同时让您完全控制旋转方向和速度；它还允许使用 CSS 灵活地调整颜色和大小。自动收报机允许不间断旋转，一旦您到达最后一项，第一项将立即开始。

【讨论】：