jQuery：FadeIn和FadeOut li并重新开始 [英] jQuery: FadeIn and FadeOut li's and start over at the last li

问题描述

我正在尝试获取一个列表淡入并按顺序淡出每个li，然后在显示最后一个li后重新开始。

I'm trying to get a list to fade in and fade out each li individually in order, and then start over once the last li has been shown.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

这当然不起作用，它会同时淡入淡出。

This of course is not working, it fades them all in and out at the same time.

$('.ul li').hide();
    var i = 1;
    while(i < 4){
         $('ul li:nth-child('+i+')').delay(1000).fadeIn(1000);
         $('ul li:nth-child('+i+')').fadeOut(100);
         i++;
 }

推荐答案

你可以这样做：

function showTheList() {
  var i = 1;
  function showOne() {
    if (i === 1) $('.ul li').hide();
    $('ul li').eq(i-1).delay(1000).fadeIn(1000, function() {
      $('ul li').eq(i-1).fadeOut(100, function() {
        if (++i > 4) i = 1;
        showOne();
      });
    });
  }
  showOne();
 }

该功能的作用是设置另一个功能基于索引变量i执行仅显示< li> 元素之一的工作。当i为1时，它首先隐藏所有< li> 元素。然后它启动动画以淡入其中一个元素，然后将其淡出，最后在淡出完成后的回调中，它会递增i并再次启动。

What that function does is set up another function to do the work of showing just one of the <li> elements, based on the index variable "i". When "i" is 1, then it first hides all the <li> elements. It then starts up the animation to fade in one of the elements and then fade it out, and finally in the callback from when the fade-out is done it increments "i" and starts itself again.

这里是一个jsfiddle。请注意，我使用.eq（）而不是nth-child来减少混乱。否则，这不会做任何非常奇怪的事情。

Here is a jsfiddle. Note that I used ".eq()" instead of the "nth-child" thing to cut down on clutter. Otherwise this doesn't do anything that's really weird.

这篇关于jQuery：FadeIn和FadeOut li并重新开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！