Question

我已经使用了Innerfade和Cycle，但我有几个div需要淡入，暂停和淡出，但我想以不同的速率暂停不同的幻灯片，因为有些内容会比其他幻灯片更多。我没有看到如何通过Innerfade或Cycle实现这一目标。

我试过这个，但所有的事件都会立即发生。

<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秒钟。我怎么能做到这一点？感谢您提供任何帮助！

Answer 1

“延迟”仅延迟与其关联的元素的动画，而不是您稍后动画的其他元素。使用“setTimeout”javascript函数代替查看代码：

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秒）。

此致尼尔

jQuery幻灯片显示不同的延迟时间

1 个答案: