Blink and bounce effect on image or object using jquery

Posted on April 11, 2008
Filed Under how-to, javascript, jquery, tips and technique

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:

.message{
border:1px solid #CCCCCC;
padding: 5px;
width: 150px;
background-color:#F4F4F8;
text-align:justify;
position:absolute;
top:50px;
}

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
$("#blink_out").click(function()
{
  $("#object").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
});

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
$("#blink_in").click(function()
{
  $("#object").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

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
$("#bounce").click(function()
{
  $("#object").fadeIn(100).animate({top:"-=20px"},100).animate({top:"+=20px"},100).animate({top:"-=20px"},100)
.animate({top:"+=20px"},100).animate({top:"-=20px"},100).animate({top:"+=20px"},100);
});

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

Popularity: 13% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» Flashing Alert Message Box using JQuery
» Image hover effect using jQuery
» Block Shuffling effect using jquery
» How to make accordion menu using jquery

Comments

5 Responses to “Blink and bounce effect on image or object using jquery”

PHP Coding School » Blog Archive » php tips [2008-04-11 17:00:29] on April 11th, 2008 5:20 pm

[...] Blink and bounce effect on image or object using jquery By Roshan 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. Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
madhu on April 29th, 2008 10:27 am

I’m new to jQuery.this site really helped me to learn it easy.Thanks a lot roshan
Roshan on April 29th, 2008 3:57 pm

nice to hear that madhu…..u r most welcome..
Calin on July 15th, 2008 6:38 pm

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,

Calin.
Roshan on July 15th, 2008 7:20 pm

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

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