Question

我有一张图像地图，上面有几个div作为城市点。我在css中编写了一个类来动画这些点的颜色，所以我可以通过jQuery添加该类，等待一段时间并删除该类。目标是随机设置这些点的动画（添加类，等待，随机删除类），但目前我在等待删除类之前一直等待。我尝试了不同的解决方案，包括在本网站上发布的解决方案，但没有结果。 Hre是代码：

        function builtCities() {
            if ($('body.page-service-map').size()) {
                var content = $('#region-content .content'),
                    cityDot = '<div class="city-dot"></div>',
                    cities = [
                        'moscow',
                        'saint-petersburg',
                        'krasnodar',
                        'rostov-na-donu',
                        'tyumen',
                        'omsk',
                        'irkutsk'
                    ];

                for (var i = 0; i < 7; i++) {
                    content.append(cityDot);
                }

                $('body.page-service-map .city-dot').each(function (index) {
                    $(this).addClass(cities[index]);
                });

                // animation
                for (var j = 0; j < cities.length; j++) {                       
                    function partA(partB) {
                        $('.city-dot').eq(j).addClass('animate');
                        window.setTimeout(partB, 1000);
                    } partA(partB);

                    function partB() {
                        $('.city-dot').eq(j).removeClass('animate');
                    }           
                }


            }
        } builtCities();

Answer 1

由于关闭，它无法正常工作。这样做：

for (var j = 0; j < cities.length; j++) { 
    $('.city-dot').eq(j).addClass('animate');
    window.setTimeout((function (j) {
        return function () {
            $('.city-dot').eq(j).removeClass('animate');
        };
    }(j)), 1000);
}

您当前的版本不起作用，因为您的j变量将被保留，并且在您调用cities.length时实际上等于partB。为了解决这个问题，上面调用了传递j的函数，该函数将使用将使用正确索引的单独变量（参数j）返回另一个函数。

jQuery添加类并休眠然后删除类

1 个答案: