Question

假设我有以下div：

<div class="a">You are funny.</div>
<div class="b">You are smart.</div>
<div class="c">You are cool.</div>

显示div.a 5秒钟的最佳方式是什么，然后逐渐淡出并淡入div.b 5秒钟，然后转移到div.c然后再回到div.a并继续循环无限的时间？

谢谢：）

Answer 1

您可以使用值数组并循环它们。

var div = $('div').hide(),
    news = ['news1', 'news2', 'news3'],
    count = 0;

function changeNews() {
    div.fadeIn().delay(500).fadeOut(function() {
        changeNews();
    }).text(news[count++])
    if (count == news.length) {
        count = 0;
    }
}
changeNews();

检查http://jsfiddle.net/qJa3h/

处的工作示例

Answer 2

jQuery插件怎么样？我没有测试过，但这样的事情应该让你开始：

(function($) {

    $.fn.keepFadingToNext = function(options) {
        var defaults = {
            duration: 5000
        };

        var settings = $.extend({}, defaults, options);

        var original = this;

        var doAnimations = function(element) {
            element.fadeIn(settings.duration, function() {
                element.fadeOut(settings.duration, function() {
                    var next = element.next();

                    if (next.length === 0) {
                        next = original;
                    }

                    doAnimations(next);
                });
            });
        };

        doAnimations(original);

        return original;
    };

})(jQuery)

$('.a').keepFadingToNext();

// or
$('.a').keepFadingToNext({ duration: 3000 });

淡入淡出并循环遍历一组div的最佳方法

2 个答案:

检查http://jsfiddle.net/qJa3h/