Приостановка каждого цикла затухания

У меня есть цикл .each в jquery, который затухает изображения, чтобы показать их на заднем плане. Каждому последующему изображению назначается увеличенная задержка. Можно ли приостановить такой цикл кликом?

 <?php
    $ttlart = count($rows);
    echo "var ttlart = " . $ttlart . ";";
    foreach ($rows as $ro) {
        $fadedur = $ro['fadedur'];
            echo "fadedur = " . $fadedur . ";";
            $staysonscreen = $ro['staysonscreen'];
            echo "staysonscreen= " . $staysonscreen . ";";
        $order = $ro['order'];
            echo "order= " . $order. ";";
            echo "$(\"#" . $order . "\").css(\"font-size\",fadedur);";
            echo "$(\"#" . $order . "\").css(\"text-indent\",staysonscreen);";     
            //echo "alert(\"here\");";
    }
    ?>

    var artdelay = 0;
    var playstop = 0;
    var ctr = 1;    

    $($("#images img").get().reverse()).each(function(){
       fadedur = parseInt($(this).css("font-size"));
       staysonscreen = parseInt($(this).css("text-indent"));
       artdelay = artdelay+staysonscreen;

       if (ctr < ttlart){
       $(this).delay(artdelay).fadeOut(fadedur); 
        artdelay = artdelay+fadedur;

      $(".jp-controls").click(function(){

       if(playstop == 0){
       $("#images img").stop(true);
       playstop = 1;
       }else{ //alert(artdelay);
       $("#images img").delay(artdelay).fadeOut(fadedur);
       playstop = 0;}

       });

       ctr=ctr+1;}
    });

jquery each delay fade
person user2534991    schedule 16.07.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать что-то вроде этого:

http://jsfiddle.net/EJ6Yg/

$(document).ready(function () {
    var delay = 200;
    $('div').each(function () {
        $(this).delay(delay).fadeOut('slow');
        delay *= 1.5;
    });
});

Конечно, замените div каким-нибудь селектором для ваших изображений.

Прочитав ваше обновление, я думаю, что вижу проблему - вы используете delay(), но хотите иметь возможность приостанавливать или останавливать анимацию.

В jQuery API это конкретно упоминается:

Метод .delay() лучше всего подходит для задержки между эффектами jQuery в очереди. Поскольку он ограничен — он, например, не предлагает способ отменить задержку — .delay() не является заменой родной функции JavaScript setTimeout, которая может быть более подходящей для определенных случаев использования.

Я считаю, что это вариант использования, где setTimeout более подходит.

person Jason P    schedule 16.07.2013
comment
Большое спасибо за ответ, но я забыл указать, что мне нужно, чтобы пауза инициировалась при нажатии. Это удваивает сложность. - person user2534991; 16.07.2013
comment
Хорошо, спасибо за вашу помощь. Вы видите, что я пытаюсь сделать? - person user2534991; 16.07.2013
comment
Я в основном хочу поставить паузу на моем слайд-шоу, щелкнув. Я думал, что это будет легко. - person user2534991; 16.07.2013
comment
Большое спасибо. Я попробую и дам вам знать, как это происходит! - person user2534991; 16.07.2013
comment
Спасибо за вашу помощь. Я понял это, используя setTimeout. - person user2534991; 19.07.2013

arrow_upward
0
arrow_downward

Не уверен, правильно ли я понимаю ваш вопрос, но попробуйте что-то вроде этого.

$.each($).wait(1000, function(index) {
    // Sets a 1 second delay between iterations
});
person Willem Ellis    schedule 16.07.2013
comment
Прошу прощения, я не уточнил, что это нужно делать кликом. Спасибо вам обоим за вашу помощь в любом случае. - person user2534991; 16.07.2013