心跳效果过渡与图像

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

小提琴