javascript - 带图像的心跳效果过渡

Question

你好想制作一个带有心跳效果的图像。2 次快速脉冲然后中断 2 秒，2 次快速脉冲然后中断 2 秒。如果可能的话，我想把它放在一个 div 中，以集中缩放锚点......

这是我现在拥有的：

(function pulse(back) {
    $('#seventyfive img').animate(
        {
            width: (back) ? $('#seventyfive img').width() + 20 : $('#seventyfive img').width() - 20            
        }
    , 700);
    $('#seventyfive').animate(
        {          
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }
    , 700, function(){pulse(!back)});
})(false);

或者你可以检查这个JSFiddle

Answer 1

像这样的东西：

(function pulse(back, i) {
    var el = $('#seventyfive img'),
        wd = back    ? 20 : -20,
        op = back    ? 1  : 0.5,
        de = i%4!==0 ? 0  : 1400;

    el.delay(de).animate({
        width   : el.width() + (wd), opacity : op
    }, 300, function() {
        pulse(!back, ++i);
    });
})(false, 0);

小提琴