Question

15

Jquery resize image with a heart beat effect

rated 0 times [ 22] [ 7] / answers: 1 / hits: 16477 / 11 Years ago, fri, september 13, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 11 Years ago destanyb · Accepted Answer

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