心跳效果与图像转换

Val*_*udu -1 html javascript css jquery

您好想制作一个具有心跳效果的图像.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);
Run Code Online (Sandbox Code Playgroud)

或者你可以查看这个JSFiddle

ade*_*neo 6

像这样的东西:

(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);
Run Code Online (Sandbox Code Playgroud)

小提琴