jQuery：循环通过li逐渐消失

I'm trying to have a set of list items fade in, hold then fade out. Thanks to another query on here I have the following code:

我试图让一组列表项淡入，然后保持淡出。感谢此处的另一个查询，我有以下代码：

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>

However it seems to fade in the first item then stop. Once I place it inside a wordpress template, it fades in the first item which the disappears (not fades out) and stops.

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

Any ideas on this?

有什么想法吗？

2 个解决方案

#1

You need to remove the 3000 from the end of your fadeout function:

你需要从你的淡出功能结束时删除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

更新小提琴

#2

The last argument you are passing to fadeOut is invalid.

您传递给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/

小提琴：https：//jsfiddle.net/b2brfd0f/7/

If you had looked at the console you would have seen a ton of errors. I think it was trying to treat it like an easing.

如果你看过控制台，你会看到很多错误。我认为它试图将其视为宽松政策。

You can see all the different parameter options here.

您可以在此处查看所有不同的参数选项。

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

This is the signature the code thought you were trying to use: http://api.jquery.com/fadeout/#fadeOut-duration-easing-complete

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

It always expects that the last argument is a function. But since it had 3 parameters it tried to treat your complete function like it was an easing and your invalid extra parameter like it was the complete function. And I only refer to it as invalid because of its type, not because you can't pass 3 parameters to fadeOut.

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

#1