gpt4 book ai didi

javascript - 强制 $.each() 循环等待动画完成后再继续

转载 作者:行者123 更新时间:2023-11-28 05:13:33 27 4
gpt4 key购买 nike

我正在尝试在新闻项目滚动之间添加延迟。我知道 $.each() 通过不等待动画完成来完成其工作,但我想知道如何制作它,以便一次向上滚动一个项目并等到最后一个动画完成后再继续在循环中。

$(function() {
var parentHeight = $("#news_updates").height();
$(".updateItem").css("top", parentHeight);


$("#news_updates").children().each(function() {
scrollr($(this));
});

function scrollr(itemToScroll) {
itemToScroll.animate({top: '40%'}, 3000).delay(7000).animate({top: -35}, 3000);
}
});
body 
{
background-color: lightgrey;
}
#sponsor_updates {

}
#news_updates
{
overflow: hidden;
background-color: black;
height: 250px;
width: 300px;
color: white;
position: relative;
}
#sponsor_updates h2
{
color: white;
}
.updateItem
{
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="sponsor_updates">
<h2>News & Updates</h2>
<div id="news_updates">
<div class="updateItem">
<p>News Item 1</p>
</div>
<div class="updateItem">
<p>News Item 2</p>
</div>
<div class="updateItem">
<p>News Item 3</p>
</div>
</div>
</div>
</div>
</body>
</html>

最佳答案

这是一种相当简单的延迟和转换页面加载的方法,而不是每 5 秒一次。当它不像幻灯片那样复杂且时间一致时,我就会使用它。它是伪造的,但对于简单的解决方案来说效果很好。

var duration = 5000;

$('className').each(function(n) {
$(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

关于javascript - 强制 $.each() 循环等待动画完成后再继续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41175493/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com