如何重写这段代码(" setTimeout-s"的意大利面)?

时间:2014-09-12 11:26:28

标签: javascript jquery

请帮我重新写一下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();

1 个答案:

答案 0 :(得分: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);

第一个循环中可能有一个小故障,但您可能能够用该基本代码弄清楚。

在我看来,它应该与你所拥有的相差甚远。