2014-09-12 39 views
0

請幫我重新寫的setTimeout小號該代碼(「setTimeout-s」的意大利麪條)可以如何重寫?

這是一個動畫這麪條:所選圖像亮點有1秒的時間間隔

var $pic_1 = $('.pic-1'); 
     var $pic_13 = $('.pic-13'); 
     var $pic_4 = $('.pic-4'); 
     var $pic_9 = $('.pic-9'); 
     var $pic_12 = $('.pic-12'); 
     var $pic_19 = $('.pic-19'); 
     var $pic_11 = $('.pic-11'); 
     var $pic_20 = $('.pic-20'); 

     function blinkImages() { 
      $pic_1.css('opacity', 1); 
      setTimeout(function() { 
       $pic_1.css('opacity',.3); 
       $pic_13.css('opacity', 1); 
       setTimeout(function() { 
        $pic_13.css('opacity',.3); 
        $pic_4.css('opacity', 1); 
        setTimeout(function() { 
         $pic_4.css('opacity',.3); 
         $pic_20.css('opacity', 1); 
         setTimeout(function() { 
          $pic_20.css('opacity',.3); 
          $pic_9.css('opacity', 1); 
          setTimeout(function() { 
           $pic_9.css('opacity',.3); 
           $pic_12.css('opacity', 1); 
           setTimeout(function() { 
            $pic_12.css('opacity',.3); 
            $pic_19.css('opacity', 1); 
            setTimeout(function() { 
             $pic_19.css('opacity',.3); 
             $pic_11.css('opacity',1); 
             setTimeout(function() { 
              $pic_11.css('opacity',.3); 
              blinkImages(); 
             },1000); 
            },1000); 
           },1000); 
          },1000); 
         },1000); 
        },1000); 
       },1000); 
      }, 1000); 
     } 
     blinkImages(); 
+3

你可以創建一個遞歸函數或類似的東西。 – 2014-09-12 11:29:00

+5

聽起來像是一個問題http://codereview.stackexchange.com/ – 2014-09-12 11:29:16

+0

你能描述一下這段代碼實際上在做什麼嗎?這是一個幻燈片? (只是一個猜測) – 2014-09-12 11:30:03

回答

3

如何像

var seq=['.pic_1','.pic_13','.pic_4','.pic_20','.pic_9','.pic_12','.pic_19','.pic_11'] 
var cur = seq.shift(); 
$(cur).css('opacity', 1); 
setInterval(function() { 
    $(cur).css('opacity', 0.3); 
    seq.push(cur); 
    cur = seq.shift(); 
    $(cur).css('opacity', 1); 
}, 1000); 

有可能是第一個循環中的一個小故障,但你可能會用這個基本代碼弄清楚它。

在我看來,它應該不會離你所擁有的很遠。

相關問題