2014-09-12 26 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); 

有可能是第一个循环中的一个小故障,但你可能会用这个基本代码弄清楚它。

在我看来,它应该不会离你所拥有的很远。