javascript - 带图像的心跳效果转场

Question

你好，想做一个有心跳效果的图片。 2 次快速脉冲然后 2 秒中断，2 次快速脉冲然后 2 秒中断。我想把它放在一个 div 中，如果可能的话集中缩放 anchor ...

这是我现在拥有的:

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

FIDDLE