且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery一次在div内的p个标签中循环.fadeIn和.fadeOut

更新时间:2023-10-30 12:45:46

这是一个非常简单的解决方案:

This is a very simple solution:

function fade($ele) {
    $ele.fadeIn(6000).delay(3000).fadeOut(6000, function() {
        var $next = $(this).next('p');
        // if there is a following `p` element, it is faded in
        // otherwise start from the beginning by taking
        // the parent's first child
        fade($next.length > 0 ? $next : $(this).parent().children().first());
   });
};  

fade($('#tml-container > p').first());

演示

可重复使用的插件版本:

而不是遍历某个元素的子元素,而是遍历所选元素.

Instead of iterating over the children of a certain element, it iterates over the selected elements.

(function($) {
    var default_config = {
        fadeIn: 3000,
        stay: 3000,
        fadeOut: 3000
    };

    function fade(index, $elements, config) {
        $elements.eq(index)
          .fadeIn(config.fadeIn)
          .delay(config.stay)
          .fadeOut(config.fadeOut, function() {
              fade((index + 1) % $elements.length, $elements, config);
          });
    }

    $.fn.fadeLoop = function(config) {     
        fade(0, this, $.extend({}, default_config, config));
        return this;
    };

}(jQuery));

可用作:

$('#tml-container > p').fadeLoop({fadeIn: 6000, stay: 3000, fadeOut: 6000});

演示