我正在尝试让一组列表项淡入,按住然后淡出。感谢这里的另一个查询,我有以下代码:
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模板中,它就会在第一项中消失(而不是淡出(并停止。
对此有什么想法吗?
您需要从淡出函数的末尾删除 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>
更新的小提琴
传递给 淡出的最后一个参数无效。
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
});
}
小提琴:https://jsfiddle.net/b2brfd0f/7/
如果您查看控制台,您会看到大量错误。我认为它试图将其视为宽松。
您可以在此处查看所有不同的参数选项。
http://api.jquery.com/fadeout/
这是代码认为您尝试使用的签名:http://api.jquery.com/fadeout/#fadeOut-duration-easing-complete
它始终期望最后一个参数是一个函数。但是由于它有 3 个参数,它试图将您的完整函数视为缓动,而将您的无效额外参数视为完整函数。我只是因为它的类型而将其称为无效,而不是因为您无法将 3 个参数传递给淡出。