强制$ .each（）循环等待动画完成后再继续
[英]Force $.each() loop to wait for animations to complete before continuing
问题描述
I'm trying to add a delay between news items scrolling. 
我试图在新闻滚动之间增加延迟。 I understand that $.each() is doing its job by not waiting for animations to finish, but I'd like to know how to make it so one item is scrolled up at a time and waits until the last animation has finished before continuing in the loop. 我知道$ .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>
2 个解决方案
解决方案1
0 2016-12-16 00:30:24
In order for this to happen it will need to recurse on animation completion. 为了做到这一点，需要在动画完成时递归。 Note that the delay was dropped to 700 for the sake of this demo. 请注意，为了进行此演示，延迟已降至700。
$(function() { var parentHeight = $("#news_updates").height(); $(".updateItem").css("top", parentHeight); //collect items for recursion var items = $("#news_updates").children(); //immediately call a named function to recurse with //break out when items are no longer present (function scrollr(items,index) { var itemToScroll = items.eq(index++); if(!itemToScroll.length)return; itemToScroll.animate({top: '40%'}, 3000).delay(700).animate({top: -35}, 3000,function(){ scrollr(items,index); }) })(items,0) });
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>
解决方案2
0 2016-12-16 00:37:11
Here is a rather simple approach to delay and transition on page load, than once every 5 secs. 这是一种相当简单的延迟和过渡页面加载的方法，而不是每5秒一次。 It is what I use when it is not complicated like a slide where timing is consistent. 这是我在时序不复杂的幻灯片中使用时所使用的。 It is faking it but works well for simple solutions. 它是伪造的，但适用于简单的解决方案。
var duration = 5000;
$('className').each(function(n) {
$(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.