Javascript 如何在a<;部门>;标记一次消失一个
我需要实现一个垂直滚动条,我决定将其作为嵌套在父元素中的子元素列表来实现,并一次隐藏/删除/滑动这些子元素,从而导致下面的元素向上移动 我正试图使用JQuery的.each()对嵌套进行迭代,删除当前嵌套,稍等片刻,然后移动到下一个嵌套 我写了下面的代码作为一种尝试。它等待几秒钟,然后立即删除所有元素,否定了我想要的效果 我四处搜索,我在这里找到的所有其他答案都是关于在对所有元素采取行动之前有一个延迟。我已经可以这么做了,但是我该怎么做才能让孩子一个一个地消失呢Javascript 如何在a<;部门>;标记一次消失一个,javascript,jquery,html,jquery-animate,vertical-scrolling,Javascript,Jquery,Html,Jquery Animate,Vertical Scrolling,我需要实现一个垂直滚动条,我决定将其作为嵌套在父元素中的子元素列表来实现,并一次隐藏/删除/滑动这些子元素,从而导致下面的元素向上移动 我正试图使用JQuery的.each()对嵌套进行迭代,删除当前嵌套,稍等片刻,然后移动到下一个嵌套 我写了下面的代码作为一种尝试。它等待几秒钟,然后立即删除所有元素,否定了我想要的效果 我四处搜索,我在这里找到的所有其他答案都是关于在对所有元素采取行动之前有一个延迟。我已经可以这么做了,但是我该怎么做才能让孩子一个一个地消失呢 $(文档).ready(函数(
$(文档).ready(函数(){
$(“#滚动条”).find(“div”).each(函数(){
console.log(this);
$(this.delay(10000).slideUp();
//$(this.slideUp();
});
});代码>
文本1
texto 2
texto 3
我建议使用setTimeout方法对每个失踪事件计时
setTimeout(function(){
$("#1").slideUp();
}, 1000);
// ...
查看此代码:
$(document).ready(function() {
$("#scroller").find("div").each(function (index) {
var el = $(this);
setTimeout(function (){
el.slideUp();
},1000 * index);
});
});
它们一下子消失的原因是.delay函数不会暂停代码,它只是将函数安排在将来的某个偏移时间运行。您的代码所做的是将.slideUp()
计划为将来的每个div一次运行10000毫秒
您可以做些什么,而不是通过元素消失之间所需的时间来抵消每个延迟。我已将默认延迟设置为5000毫秒,以便您可以快速查看其效果
$(document).ready(function() {
$("#scroller").find("div").each(function(index) {
$(this).delay( (1 + index) * 5000 ).slideUp();
});
});
HTML:
文本1
texto 2
texto 3
(点击顶部的Run以再次查看)。我相当确定他们仍将同时跑步。setTimeout不会在调用函数之前等待,它会提前安排。在创建问题之前,我也尝试过使用setTimeout(毕竟,这是一个常见的建议),是的,所有元素都同时消失了-/这一个有效,但是@analytalica的解决方案看起来更干净,甚至有一个JSFIDLE。谢谢很好,谢谢。使用索引比使用偏移量更好,就像@dark4p所做的那样。我改变了你的答案。
<div class="scroller" id="scroller">
<div id="1">texto 1</div>
<div id="2">texto 2</div>
<div id="3">texto 3</div>
</div>