Jquery resizes the image with a heartbeat effect

综合技术 2018-01-01

Hello want to make a image with a heartbeat effect. It has to resize a bit, let's say maximum 20 pixel bigger, and then goes to original size. It will be like a heartbeat, 2 beats - original, 2 beats - original.

So far I found only this effect:

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

Or you can check it out here: JSFiddle

this will do

(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);
Hello, buddy!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

jQuery and CSS positioning conflicts I'm writing a small viewer for a few images. I'm having trouble and I'm not sure what the cause is, but my guess is it's the mixture of CSS and jQuery...
Uncaught SyntaxError: unexpected token i... I create WordPress ShortCode tab and write this code to collect the shortcode jQuery('body').on('click', '#tapSubmit',function(){ var shortcode ...
Changing from jQuery to P5 saves you 92% of your c... Who do you think was the most lucky here? Small or big …? According to many scientific studies about software productivity, the cost o...
JQuery UI: Nested triable errors Thanks for reading. Two issues: I am creating a task-list type of system, which will use nested sortable lists. Here's some very basic demo code...
深入理解SpringCloud之Eureka注册过程分析 eureka是一种去中心化的服务治理应用,其显著特点是既可以作为服务端又可以作为服务向自己配置的地址进行注册。那么这篇文章就来探讨一下eureka的注册流程。 一、Eureka的服务端 eureka的服务端核心类是EurekaBootstrap,该类实现了一个ServletContex...