每个元素的 SlideUp 和 Slidedown答案

【问题标题】：SlideUp and Slidedown for each element每个元素的 SlideUp 和 Slidedown
【发布时间】：2018-03-09 23:31:45
【问题描述】：

尽管有些答案很接近，但我在这些页面上搜索了一个没有运气的答案。我喜欢写的是一个父级中 5 个元素的函数，看起来像这样。

HTML

<div id="introOverlay">
  <div id="introSlider-0"></div>    
  <div id="introSlider-1"></div>    
  <div id="introSlider-2"></div>    
  <div id="introSlider-3"></div>    
  <div id="introSlider-4"></div>
</div>

每个元素都应该在下一个开始之前上下滑动（使用 css 过渡，因此以高度为目标）。所以我尝试创建一个滑块，结合多种功能。现在延迟是由每个元素的索引计算的，但它使转换不同的是速度。如何为每个元素获得相同的速度？我正在尝试.queue() / .dequeue()，但是如何将它与setTimeout() 结合使用？这就是我到目前为止所得到的。

jQuery

function introSlides() {

    $('#introOverlay div[id^=introSlider]').each(function(i){               

    var slides = $(this);

        // Slide Down
        setTimeout(function() {
            slides.css({'height' : 600});
        }, 3000 * i);

        // Slide Up
        setTimeout(function(){ 
            slides.css({'height' : 0}); 
        }, 4000 * i);                       

   });
}

除此之外，如何为第一个元素设置超时？现在它从一开始就获得了第二个 CSS 样式。实现这一目标的最佳方法是什么？感谢您提供任何帮助或提示！

【问题讨论】：

你需要绑定transitionend或者animationend然后开始下一个转场/动画...
从来没有听说过这个，但现在检查一下。谢谢！

标签： jquery each settimeout

【解决方案1】：

感谢 Hitmands 为我指明了正确的方向，我设法解决了这个问题。我很好奇为什么第 9 行中的第一个 .dequeue() 似乎没有多大作用。

脚本

function introSlides() {                
$('#introOverlay div[id^=introSlider]').each(function(i){           

var slides = $(this);                       

// Slide Down
setTimeout(function() {
    slides.css({'height' : 600}).delay(3000).queue(function(){
        $(this).css({'height' : 0}).dequeue();
    });
}, 4000 * i);               

$(this).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",

function(e){
// slide Up again
$(this).css({ 'height' : 0 }).dequeue();
});             

});}

也许这段代码可以改进。请随时回复……我还在学习。谢谢:)

【讨论】：