Blink and bounce effect on image or object using jquery

Yesterday, Sushil asked me how can we bounce and blink an image or div using jQuery.In this post, I”ll show you how you can add bounce or blink effect to an image or div using jQuery.

Live Demo

First of all, let’s begin with the html code to add blink and bounce effect to your object using jQuery.

HTML Code:

<div id="object" class="message"> lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div>

Here the object which is needed to be animated is defined with the class”message” and with id “object”. Remember that, you can also put image in that “div” to bounce or blink.

Css Code:

border:1px solid #CCCCCC;
padding: 5px;
width: 150px;

You can see the attributes of the “message” class in css. You can change the above attributes as your need but remember one thing that the position property should be “absolute”. If you put it “relative”, the other object around the animated “div” or “image” starts get moved.

Javascript Code:

For blinking out the Object

//hide the object with blink effect

As you can see above code, it is straightforward. When an element with id “blink_out” gets clicked, the element with id “object” gets animated with “fade out” and “fade in” effect of jQuery in alternative manner.

For blinking in the Object

//show the object with blink effect

As you can see this code is same as the above code but altered the way the “image” or “div” gets faded.

For bouncing the Object

//bounce an object

In the above code, we’ve used jquery’s animate() function to bounce an “image” or “div”. The “top” attribute of the object is toggled to show the bouncing effect on the object.

Download full source code

22 thoughts on “Blink and bounce effect on image or object using jquery

  1. madhu

    I’m new to jQuery.this site really helped me to learn it easy.Thanks a lot roshan

  2. nice to hear that madhu…..u r most welcome..

  3. Hello, the technique is very good, I tested it.

    Can you help me with the following request?
    How can I make the blink_in or blink or bounce effect to be available when the page is loaded? (not by pressing a button?). Usually there is an “onload” command on Body tag, can you advice me, please?

    Best regards,


  4. for that you can put the effect under body load like this in jquery…

    $(function() {
    //ur code goes here

  5. Aron

    This is a great little script!
    I do have one problem though, I’ve applied this script to various layers with a hover function as opposed to your click with the effect of fading out and fading back in again. However only the first layer fades in and out when i roll over it. Nothing happens to the others.

    Maybe you could take a look at my script and tell me where I’m going wrong.


  6. @Aron – Replace
    with this

    in ur script…

  7. Aron

    Thanks for your help, but look what happens now…

    I want only the layer thats being hovered over to flash, if at all possible?


  8. replace

  9. nymie


    i’m searching for a solution to use the bounce effect when the site is loaded.
    sorry, but i dont understand how write the right code for that.
    Maybe you can post it?

    Thanks a lot A.Nymeier

  10. can assign the function on mouseover?

  11. hey nymie ..thanks for suggestion I’ll try to post that as soon as I get the time…..

  12. Peter H

    I came across this script upon searching for a bouncing image activated by ‘mouseover’ image (within a div).

    It appeared that Aron had with help from Roshan, unfortunately his test site is no longer valid and the reference site he linked to does not appear to use that function.

    I am trying to emulate the effect as used by a Flash Mp3 Player at

    Is there anyone who has a script or amended script for the script on this site, that would help me achieve this, please.

  13. LOL! I was looking for this for an upcoming project! Roshan you are by far the best!

  14. thanks for the tip on bouncing… that helped me :)

  15. Dude this is awesome logic.. i was stuck in a project to do some blink effect.. i was sticking on setInterval() to it and really was in a crazy moments.. so i did a search in google and found your awesome code :) these code shows me the power of fadeIn, fadeOut and yeh animate() too :)

    thanks for posting
    cHeErzZz \m/

  16. esgee

    Hi, I’m just trying to blink a DIV on load. What is the code for that?

  17. Nimitz

    Thanks. :)

  18. Thanks. :)

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>