2

我在 jquery 中有一个 .each 循环，可以淡出图像以在背景中显示它们。为每个后续图像分配增加的延迟。是否可以通过点击暂停这样的循环？

 <?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;}
    });
4

2 回答 2

0

不确定我是否正确理解了您的问题，但请尝试这样的事情。

$.each($).wait(1000, function(index) {
    // Sets a 1 second delay between iterations
});
于 2013-07-16T15:57:16.960 回答
0

您可能可以执行以下操作：

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更合适的用例。

于 2013-07-16T16:01:48.247 回答