javascript - 如何重写此代码(“setTimeout-s”的意大利面条)？

请帮助我重新编写此setTimeout的意大利面

这是动画：选定的图像以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();

最佳答案

怎么样

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);

在第一个循环中可能会有一个小故障，但是您可以使用该基本代码来解决它。

在我看来，它与您的资产应该相距不远。

关于javascript - 如何重写此代码(“setTimeout-s”的意大利面条)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25807225/