Слайд-шоу JQuery с различным временем задержки - PullRequest
Новая
       34

Слайд-шоу JQuery с различным временем задержки

0 голосов
/ 19 марта 2011

Я использовал Innerfade и Cycle, но у меня есть несколько делений, которые мне нужно постепенно увеличивать, приостанавливать и уменьшать, но я хочу сделать паузу с разной скоростью для разных слайдов, потому что у некоторых будет больше контента, чем у других. Я не видел, как я мог бы сделать это с 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 секунд. Как я могу сделать это? Спасибо за любую помощь, вы можете дать!

1 Ответ

0 голосов
/ 19 марта 2011

«delay» задерживает анимацию только для элемента, с которым он связан, а не для других элементов, которые вы впоследствии анимируете.Используйте функцию javascript "setTimeout", вместо этого посмотрите код, работающий с:

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 секунды).

С уважением, Нил

...