简单的JQuery Fade代码 [英] Simple JQuery Fade ticker

问题描述

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

I've looked at multiple tickers and they are all far to weighted. I'm after a very simple fadeIn() fadeOut() JQuery ticker for a list of elements to display titles.

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

我看了下一个函数，但是我不知道如何使它显示我想要的元素.因此，我追求的是非常简单的事情.它所需要的只是一个间隔，一个淡入淡出和一个循环淡入.

I looked at the next function but I don't know how to make it show the elements I want. So I'm after something very simple. All it needs is an interval a fade out and a fade in on a loop.

推荐答案

我做了一个非常简单的推子，重量很轻.用于图片，但用于div:

I did a very simple fader, very light weight. used it for images but changed it for divs:

脚本

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

这篇关于简单的JQuery Fade代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！