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

【问题标题】：jQuery looping .fadeIn and .fadeOut of p tags within div one at a timejQuery一次循环一个div内的p标签的.fadeIn和.fadeOut
【发布时间】：2012-01-26 20:00:22
【问题描述】：

下面的代码成功淡入一个推荐 6 秒，等待 3 秒，然后淡出并继续下一个。一旦它到达第三个推荐，它就会跳回到第一个。这正是我想要的，但在我的实际网站上，我有超过三个推荐，并且将来可能会添加更多。我不想每次添加新推荐时都返回并添加新功能。我尝试了一段时间使用“this”和 .next() 让它工作，但失败了。我希望有人可以通过循环它并让它移动到容器中的下一个 p 标签来提高效率，而无需每次都调用一个新函数。任何帮助表示赞赏，谢谢。

注意：我知道有类似的问题，但没有一个是完全相同的，答案也低于标准。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#tml-container p { display: none; }
</style>
</head>
<body>

<div id="tml-container">
    <p id="one">Testimonial 1</p>
    <p id="two">Testimonial 2</p>
    <p id="three">Testimonial 3</p>
</div>

<script>
$(document).ready(function() {
    function doFade() {
        $("#one").fadeIn(6000,function() {
            $("#one").fadeOut(6000).delay(3000);
            setTimeout(fadeTwo,6000);
        });
    }

    function fadeTwo() {
        $("#two").fadeIn(6000,function() {
            $("#two").fadeOut(6000).delay(3000);
            setTimeout(fadeThree,6000);
        });
    }

    function fadeThree() {
        $("#three").fadeIn(4000,function() {
            $("#three").fadeOut(6000).delay(3000);
            setTimeout(doFade,6000);
        });
    }
    doFade();
});
</script>

</body>
</html>

【问题讨论】：

当您使用 jQuery 时，我建议您使用 $('p').hide(); 隐藏您的元素，以保持内容对没有 jQuery 作为后备的用户可见。

标签： jquery loops this fadein next

【解决方案1】：

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

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

DEMO

可重复使用的插件版本：

它不是迭代某个元素的子元素，而是迭代选定的元素。

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

DEMO

【讨论】：

非常很好的答案！特别是插件的东西。很棒，很棒的东西。
像魅力一样工作！那个 jsFiddle 演示也很好。以前从未见过那个网站。非常感谢您花时间回答，但如果您或其他人不介意解释以下内容。褪色（$next.length > 0 ? $next : $(this).parent().children().first());
@Justin：考虑使用插件版本，因为它更容易重用，并且不容易改变您的 HTML 结构。我将添加一些关于该行的 cmets。 x ? y : z 构造是条件运算符。如果x 为真，则返回y，否则返回z。 $next.length 告诉您$(this).next('p') 选择了多少元素。如果没有选择，则没有后续p 元素，我们必须从头开始，所以我们取父母的第一个孩子。这假设第一个孩子实际上是我们想要淡入的下一个孩子（因为它是
您的示例中的情况）。版本中的插件更灵活，它只是循环所有选定的元素。
@FelixKling 非常好！感谢插件和额外的解释。这很有帮助。

【解决方案2】：

更改了一个自行开发的插件以满足您的要求，虽然没有完全测试它。

至少应该告诉你如何正确设置这样的东西。

希望这会有所帮助:)

(function($){
    $(function(){
        $('#tml-container').testimonialFader();
    });

    $.fn.testimonialFader = function(){
        return this.each(function(){
            var $par = $(this),
            $testimonials = $par.children('p'),
            $current = $testimonials.first();

            $testimonials.not(':first').hide();

            $testimonials.on('testimonialReady.testimonialFader', wait);
            $testimonials.on('waitComplete.testimonialFader', showNext);

            $current.trigger('testimonialReady.testimonialFader');

            function wait(e){
                $current.trigger('waitStart.testimonialFader');
                setTimeout(
                    function(){
                            $current.trigger('waitComplete.testimonialFader');
                        },
                        6000
                );
            }
            function showNext(){
                $current.trigger('testimonialChange.testimonialFader');
                if($testimonials.length > 1){
                    var $next = $current.next();
                    if($next.length == 0){
                        $next = $testimonials.first();
                    }
                    $current.fadeOut(800);
                    $next.fadeIn(800, 
                        function(){
                            $next.trigger('testimonialReady.testimonialFader');
                        }
                    );
                    $current = $next;
                }
            }

        });
    };
}(jQuery));

【讨论】：