How To Make Icon Bounce Until It Loses Hover With Jquery?
<p>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.</p>

<p>Here is the page. The element/icon is the "business" image. <a href="http://fdtcincinnati.com/landing-page" rel="nofollow">http://fdtcincinnati.com/landing-page</a></p>

<p>How is this effect (or a similar blink effect) achieved?</p>

<p>Thanks!</p>

<p>EDIT</p>

<p>Here is the Jquery/JS:</p>

<pre><code>$(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);

    }

}
</code></pre>

<p>Here is the HTML:</p>

<pre><code>    &lt;body id="landing_page"&gt;

    &lt;div id="fp_wrapper"&gt;

        &lt;h1 id="lp_logo"&gt;&lt;a href="/"&gt;First Discount Travel Cincinnati&lt;/a&gt;&lt;/h1&gt;

        &lt;a id="business" href=""&gt;Business&lt;/a&gt;

        &lt;a id="leisure" href=""&gt;Business&lt;/a&gt;

        &lt;p id="below"&gt;Click one of the couples to continue!&lt;/p&gt;

    &lt;/div&gt;&lt;!-- end fp_wrapper --&gt;

&lt;/body&gt;
</code></pre>
