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, 2022 in JQuery by Edureka
• 13,690 points

recategorized May 27, 2022 by Hemant 689 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, 2022 by gaurav
• 23,260 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,840 points
12,202 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,840 points
2,167 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,840 points
4,250 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,840 points
7,257 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, 2022 in JQuery by Edureka
• 13,690 points
781 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, 2022 in JQuery by Edureka
• 13,690 points
1,593 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, 2022 in JQuery by Edureka
• 13,690 points
995 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, 2022 in JQuery by rajatha
• 7,680 points
24,344 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, 2022 in JQuery by gaurav
• 23,260 points
974 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, 2022 in JQuery by gaurav
• 23,260 points
1,120 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP