jquery 缩放 4 个圆圈一个一个

Question

我试图实现一个一个地放大/缩小(或脉动)4 个圆圈的效果。例如脉冲 A，当 A 完成时脉冲 B..等等..

到目前为止，我的效果是每 4 秒脉冲一次，这很好。现在只是将它们分开。谁能帮我解决这个问题？

function pulseCircles() {
    if($(".header-banner .emo-faces").not(":hover")) {
        var $object = $(".header-banner .emo-faces");
        var delay = 4000;
        var delay2 = 2000;
            setTimeout(function() {
                $($object).addClass("pulse2");
                setTimeout(function() {
                    $($object).removeClass("pulse2");
                    pulseCircles();
                }, delay2);
            }, delay);
    }
};
pulseCircles();

编辑:

<div class="emo-faces">
    <a href="<?php echo get_tag_link(169); ?>" class="emj smile yellow icon-emo-happy"></a>
    <a href="<?php echo get_tag_link(167); ?>" class="emj suprise green icon-emo-suprised"></a>
    <a href="<?php echo get_tag_link(168); ?>" class="emj sad brown icon-emo-sad"></a>
    <a href="<?php echo get_tag_link(170); ?>" class="emj angry red icon-emo-angry"></a>
</div>

Answer 1

所以我设法做到了这一点:

function LoopZooming() {
    $(".emo-faces li").each(function(i) {
        var $li = $(this);
        var $prev = $(this).prev();

        $timer = setTimeout(function() {
            $prev.removeClass("pulse2");
            $li.addClass("pulse2");
            setTimeout(function() {
                if (i === 3) {
                    $li.removeClass("pulse2");
                }
            },2000);
        }, i*2000);
        $timer;
    });
};

var $interval = setInterval(LoopZooming, 10000);
$interval;

$(".emo-faces li").hover(
    function() {
        clearInterval($interval);
        StopLoopZooming();
    },
    function() {
        var $interval = setInterval(LoopZooming, 10000);
        $interval;
    }
);