Question

尽管有些答案很接近，但我还是在没有运气的情况下搜索了这些页面。我想写的是父母中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样式。实现这一目标的最佳方法是什么？感谢您的帮助或提示！

Answer 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();
});             

});}

可能会改进此代码。请随时回复......我还在学习。谢谢:)）

每个元素的SlideUp和Slidedown

1 个答案: