Blink and bounce effect on image or object using jquery

Advertisement

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% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

» Flashing Alert Message Box using JQuery
» Sleek and Smooth animated menu using jQuery
» Image hover effect using jQuery
» Block Shuffling effect using jquery

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

  • madhu wrote on 29 April, 2008, 10:27

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

  • Roshan wrote on 29 April, 2008, 15:57

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

  • Calin wrote on 15 July, 2008, 18:38

    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 wrote on 15 July, 2008, 19:20

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

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

  • Aron wrote on 29 August, 2008, 0:24

    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.

    http://thisisemg.com/test/blink.html

    Thanks

  • Roshan wrote on 29 August, 2008, 10:35

    @Aron – Replace
    $(“#object”).hover(function()
    with this
    $(“.message”).hover(function()

    in ur script…

  • Aron wrote on 29 August, 2008, 15:32

    Thanks for your help, but look what happens now…

    http://thisisemg.com/test/blink.html

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

    Thanks

  • Roshan wrote on 29 August, 2008, 16:52

    replace
    $(“#object”).fadeOut(50)
    with
    $(this).fadeOut(50)

  • nymie wrote on 13 February, 2009, 21:07

    Hi,

    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

  • Demas W wrote on 21 February, 2009, 13:08

    can assign the function on mouseover?

  • Roshan wrote on 17 March, 2009, 13:33

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

  • Peter H wrote on 1 May, 2009, 9:42

    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 http://www.flabell.com/flash/Flash-Mp3-Player-29.

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

  • Kevin wrote on 14 January, 2010, 4:05

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

  • mihai wrote on 9 March, 2010, 22:43

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

  • Najeeb Puthiyallam wrote on 21 June, 2010, 20:26

    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/

  • esgee wrote on 23 August, 2010, 8:21

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

  • Nimitz wrote on 23 June, 2011, 2:36

    Thanks. :)

  • Mark wrote on 27 June, 2011, 6:41

    Thanks. :)

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-04-11 17:00:29]
  2. Blink and bounce effect on image or object using jquery | jQuery Wisdom
  3. pligg.com
  4. Effets blink & bounce avec jQuery - Cyril

Write a Comment

 


Copyright © 2013 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.