jQuery幻灯片具有不同的延迟时间 [英] jQuery slideshow with different delay times

问题描述

我使用了Innerfade和Cycle，但是我需要淡入，暂停和淡出一些div，但是我想以不同的速率暂停不同的幻灯片，因为某些幻灯片会比其他幻灯片内容更多.我没有看到如何使用Innerfade或Cycle来完成此任务.

I have used Innerfade and Cycle, but I have several divs I need to fade in, pause and fade out, but I want to pause at different rates for different slides because some will have more content than others. I didn't see how I could accomplish this with Innerfade or Cycle.

我尝试过，但是所有事件都立即触发.

I tried this, but all of the events fire at once.

<div id="slides">
    <div id="slide1" style="display:none;">Content1</div>
    <div id="slide2" style="display:none;">Content2</div>
    <div id="slide3" style="display:none;">Content3</div>
    <div id="slide4" style="display:none;">Content4</div>
    <div id="slide5" style="display:none;">Content5</div>
</div>
<script>
$("#slide1").fadeIn('slow');
$("#slide1").delay(5000).fadeOut('slow');
$("#slide2").fadeIn('slow');
$("#slide2").delay(5000).fadeOut('slow');
$("#slide3").fadeIn('slow');
$("#slide3").delay(10000).fadeOut('slow');
$("#slide4").fadeIn('slow');
$("#slide4").delay(5000).fadeOut('slow');
$("#slide5").fadeIn('slow');
$("#slide5").delay(5000).fadeOut('slow');
</script>

因此，在这种情况下，我想在5秒钟后淡出每张幻灯片，但幻灯片3应该停留10秒钟.我怎样才能做到这一点?感谢您提供的任何帮助！

So in this case, I wanted to fade out each slide after 5 seconds, but slide 3 should stay for 10 seconds. How can I accomplish this? Thanks for any help you can give!

推荐答案

延迟"仅延迟与其关联的元素的动画，而不延迟您以后制作动画的其他元素.使用"setTimeout" javascript函数，而不是查看正在处理的代码:

"delay" only delays the animation for the element it is associated with, not other elements that you later animate. Use the "setTimeout" javascript function instead see the code working on:

http://jsfiddle.net/elusien/eyJC4/

代码是:

$("#slide1").fadeIn('slow').delay(5000).fadeOut('slow');
var t2 = setTimeout(function(){
    $("#slide2").fadeIn('slow').delay(5000).fadeOut('slow');
    var t3 = setTimeout(function(){
        $("#slide3").fadeIn('slow').delay(10000).fadeOut('slow');
        var t4 = setTimeout(function(){
            $("#slide4").fadeIn('slow').delay(5000).fadeOut('slow');
            var t5 = setTimeout(function(){        
                $("#slide5").fadeIn('slow');
            }, 6500);
        }, 11500);
    }, 6500);
}, 6500);

用于触发超时功能的值是先前的延迟"值加上1500(1.5秒).

The values used to fire the timeout function is the previous "delay" value plus 1500 (1.5 seconds).

问候 尼尔

Regards Neil

这篇关于jQuery幻灯片具有不同的延迟时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！