Home/ Questions/Q 6954103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:33:46+00:00

I am unable to get my icon to keep bouncing up and down up

  • 0

I am unable to get my icon to keep bouncing up and down up and down on hover, but I can only manage to get it to do it one full cycle per hover.

Here is the page. The element/icon is the “business” image. http://fdtcincinnati.com/landing-page

How is this effect (or a similar blink effect) achieved?

Thanks!

EDIT

Here is the Jquery/JS:

$(document).ready(function() {

    var timeout = '';
    var intervalId = null;
    var bouncing = false;

    $("a#business").hover(function() {

        bouncing = true;
        bounce($(this), bouncing, 160, 170);

    }, function() {

        bouncing = false;
        bounce($(this), bouncing, 160, 170);

    });

});

function bounce(ob, bouncing, val1, val2) {

    if (! bouncing) {

        ob.animate({ "top": val1 + "px" }, 400);

    } else {

        ob.animate({ "top": val1 + "px" }, 400).animate({ "top": val2 + "px" }, 400);

        setTimeout(bounce(ob, bouncing, val1, val2), 800);

    }

}

Here is the HTML:

    <body id="landing_page">

    <div id="fp_wrapper">

        <h1 id="lp_logo"><a href="/">First Discount Travel Cincinnati</a></h1>

        <a id="business" href="">Business</a>

        <a id="leisure" href="">Business</a>

        <p id="below">Click one of the couples to continue!</p>

    </div><!-- end fp_wrapper -->

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Perhaps you can make use of the jQuery UI bounce effect. This simplifies the amount of code you need. I attached a data object to the business image so that you don’t need to rely on global variables. Then you use the callback of the bounce effect to loop the animation.

    http://jsfiddle.net/RkNV2/2/

    $('img').hover( 
    function() { $(this).data('bounce', true); bounce($(this));}, 
    function() { $(this).data('bounce', false);
});

function bounce($elem) {
    $elem.effect('bounce', { times: 1, distance: 10 }, 500, function() {
        if ($(this).data('bounce')) bounce($elem);
        else $elem.stop();
    });
}

    The bounce effect gives you control over # of bounces, distance of bounces, direction and mode.

    http://docs.jquery.com/UI/Effects/Bounce

    • 0