Question

I’m experimenting for the first time with JQuery/JQUI to create a simple social icon bounce effect.

I thought the code below had nailed it..

http://testing.renewablehull.co.uk/css3.html

..but there are two problems:

• the animations queue (I can’t seem to get them to stop with .stop() )
• if you move the mouse around, over and over the icon positioning changes
  (twitter icon moves below facebook, facebook icon slides left/down).

Obviously I’m missing something here! I’m a total novice so please be gentle and point me in the right direction.

Many thanks

B.

Answer 1

You can prevent the animation from stacking like this:

$(document).ready(function ()
{
    $('img').mouseover(function ()
    {
        if (!$(this).hasClass("img-hover"))
        {
            $(this).addClass("img-hover");
            $(this).effect("bounce", { times: 3, distance: 8 }, function ()
            {
                $(this).removeClass("img-hover");
            }, 0);
        }
    });
});

Incidentely you can stop your effect using:

.stop (true, true);

Read the Jquery documentation on stop to understand why you need true, true in there.