Jquery resize image with a heart beat effect

0 votes

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

May 27 in JQuery by Edureka
• 13,640 points

recategorized May 27 by Hemant 20 views

1 answer to this question.

0 votes

This code should work 

(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);
answered May 30 by gaurav
• 13,460 points

Related Questions In JQuery

0 votes
1 answer

How do I pre-populate a jQuery Datepicker textbox with today's date?

Hello @kartik, You must FIRST call datepicker() > then use ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,700 points
5,189 views
0 votes
1 answer

How can I refresh a page with jQuery?

Hello @kartik, Use location.reload(): $('#something').click(function() { location.reload(); }); The reload() function ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,700 points
205 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,700 points
2,498 views
0 votes
1 answer

How to find a parent with a known class in jQuery?

Hello @kartik, Assuming that this is .d, you can write $(this).closest('.a'); The closest method returns the ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,700 points
1,868 views
0 votes
1 answer

jQuery - Difficulty with copy-to-clipboard and a textbox

I think the problem is with your ...READ MORE

answered Jun 1 in JQuery by Edureka
• 13,640 points
10 views
0 votes
1 answer

How to disable all <input > inside a form with jQuery?

To disable all form elements inside 'target', ...READ MORE

answered Jun 3 in JQuery by Edureka
• 13,640 points
8 views
0 votes
1 answer

How to check a radio button with jQuery?

For versions of jQuery equal or above ...READ MORE

answered Jun 3 in JQuery by Edureka
• 13,640 points
14 views
0 votes
1 answer

How to check a radio button with jQuery?

We can check the status of a ...READ MORE

answered Jun 10 in JQuery by rajatha
• 4,060 points
7 views
0 votes
1 answer

How can I refresh a page with jQuery?

Use the JavaScript location. reload() Method You can simply ...READ MORE

answered Jun 10 in JQuery by gaurav
• 13,460 points
24 views
0 votes
1 answer

How to check a radio button with jQuery?

“jquery datepicker format” Code Answer's $('#timePicker'). datetimepicker({ // dateFormat: ...READ MORE

answered Jun 10 in JQuery by gaurav
• 13,460 points
9 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP