jQuery：遍历 li 淡入淡出

Question

我正在尝试让一组列表项淡入、按住然后淡出。感谢这里的另一个查询，我有以下代码：

function fadeInOut(item) {
  item.fadeIn(1000).delay(3000).fadeOut(1000, function() {
    if (item.next().length > 0) // if there is a next element
    {
      fadeInOut(item.next());
    } // use it
    else {
      fadeInOut(item.siblings(':first'));
    } // if not, then use go back to the first sibling
  }, 3000);

}

fadeInOut(jQuery('#straplines li:first-child'));

#straplines li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="straplines">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

但是它似乎在第一个项目中淡出然后停止。一旦我将它放入 wordpress 模板中，它就会淡入第一个消失（而不是淡出）并停止的项目。

对此有什么想法吗？

Answer 1

您需要从淡出函数的末尾删除 3000：

function fadeInOut(item) {
  item.fadeIn(1000).delay(3000).fadeOut(1000, function() {
    if (item.next().length) // if there is a next element
    {
      fadeInOut(item.next());
    } // use it
    else {
      fadeInOut(item.siblings(':first'));
    } // if not, then use go back to the first sibling
  });

}

fadeInOut(jQuery('#straplines li:first-child'));

#straplines li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="straplines">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Updated fiddle

Answer 2

您传递给 fadeOut 的最后一个参数无效。

function fadeInOut(item) {
  item.fadeIn(1000).delay(3000).fadeOut(1000, function() {
    if (item.next().length > 0) // if there is a next element
    {
      fadeInOut(item.next());
    } // use it
    else {
      fadeInOut(item.siblings(':first'));
    } // if not, then use go back to the first sibling
  });

}

Fiddle: https://jsfiddle.net/b2brfd0f/7/

如果您查看控制台，您会发现大量错误。我认为它试图把它当作一种缓和。

您可以在这里看到所有不同的参数选项。

http://api.jquery.com/fadeout/

这是代码认为您尝试使用的签名：http://api.jquery.com/fadeout/#fadeOut-duration-easing-complete

它总是期望最后一个参数是一个函数。但是由于它有 3 个参数，它试图将您的完整函数视为缓动，而将您无效的额外参数视为完整函数。我只是因为它的类型而将其称为无效，而不是因为您不能将 3 个参数传递给 fadeOut。

jQuery：遍历 li 淡入淡出

jQuery: Loop through li fading each in then out

javascript

jquery

delay

fadeout

fadein