jquery - jQuery缩放四圈一一

我试图达到一种放大/缩小（或脉动）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>

最佳答案

所以我设法做到这一点：

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