Question

我正在尝试编写一个循环遍历无序列表的jquery函数（具有id“intro”的ul元素）并单独淡入并淡出每个元素。这不起作用，但我在开发人员工具中没有错误。我也尝试将var list = $("#intro");更改为var list = $("#intro li");，但没有骰子

<script type = "text/javascript">
        function startAnimations(){

            var list = $("#intro");
            list.hide();
            list.each(function(li) {
                $(li).fadeIn(3000, function(){
                    $(li).fadeOut(3000);
                });

            });
        }
    </script>

因为html被要求：

<body onload="startAnimations()">
    <div class = "container">
        <div id = "inner">  </div>
        <div id = "right-col">
            <ul id = "intro">
                <li id = "greeting"> <h2 > sometext </h2> </li>
                <li id = "sidenote"> <h6 >  sometext </h6> </li>
                <li id = "sentence"> <h3 >  sometext </h3> </li>
                <li id = "sentence"> <h3 >  sometext</h3> </li>
                <li id = "sentence"> <h3 >  sometext</h3> </li>
            </ul>
        </div>
    </div>

</body>

Answer 1

尝试

function startAnimations() {
    $("#intro li").hide();

    function loop() {
        var $li = $("#intro li:first-child").fadeIn(3000, function () {
            $li.fadeOut(3000, function () {
                $li.appendTo('#intro');;
                loop()
            })
        });
    }
    loop()
}

演示：Fiddle

Answer 2

您可以使用：

function fadeLi(elem) {
    elem.delay().fadeIn().delay(1500).fadeOut(500, function () {
        if (elem.next().length > 0) {
            fadeLi(elem.next());
        } else {
            fadeLi(elem.siblings(':first'));
        }
    });
}

$(function () {
    $('#intro li').hide();
    fadeLi($('ul li:first'));
});

<强> Fiddle Demo

Answer 3

function startAnimations(){

             $("#intro").hide();

            $("#intro li").each(function() {
                 var _this = $(this);

                _this.fadeIn(3000, function(){
                    _this.fadeOut(3000);

                });

            });
        }

Answer 4

我认为你没有像你想要的那样选择李。试试这样：

<script type = "text/javascript">
        function startAnimations(){

            var list = $("#intro li");
            list.hide();
            list.each(function(index) {
                $(this).fadeIn(3000, function(){
                    $(this).fadeOut(3000);
                });

            });
        }
    </script>

这个“每个”函数的第一个参数不是元素本身。这是索引

Answer 5

其中大多数看起来都是很好的解决方案。我可能正在阅读你的问题，但我假设其优势在于逐渐消失。单独出局是因为你可以错开过渡。

如果是这种情况，我建议使用jQuery的.delay（）方法：

https://api.jquery.com/delay/

我已经分发了jsfiddle @arun，以向您展示如何做到这一点：

http://jsfiddle.net/Lgwm8/1/

function startAnimations() {
  var list = $("#intro li");
  list.hide();
  list.each(function (i, li) {
    $(li).delay(i * 500).fadeIn(3000, function () {
      $(li).fadeOut(3000);
    });
  });
}
startAnimations();

淡入/淡出jquery列表

5 个答案: