Question

I am trying to make some images “bounce”.

http://jsfiddle.net/d7UjD/43/

$('#bbb').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#bbb').mouseleave(function() {
    $(this).stop(true,true);
});
$('#target').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#target').mouseleave(function() {
    $(this).stop(true,true);
});
$('#sears').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#sears').mouseleave(function() {
    $(this).stop(true,true);
});

<div id="RegStores">
    <a href="http://www.bedbathandbeyond.com/regGiftRegistry.asp?wrn=-1824276933&amp;" target="_new"><img src="http://www.dkg2012.com/img/bbb.png" id="bbb" width="144" height="48" border="0" /></a>
    <a href="http://www.target.com/RegistryGiftGiverCmd?isPreview=false&amp;status=completePageLink&amp;listId=HCoY5fRCrcOOxRCdNn3i6g&amp;registryType=WD&amp;isAjax=false" target="_new"><img src="http://www.dkg2012.com/img/target.png" id="target" width="143" height="34" border="0" style="padding-left: 10px; padding-bottom: 5px;" /></a>
    <a href="http://www.sears.com/shc/s/GRManageView?storeId=10153&amp;catalogId=12605&amp;langId=&amp;externalId=900040792636010101&amp;grUserType=BUYER&amp;fwdURL=GRGuestRegistryView&amp;sortType=category" target="_new"><img src="http://www.dkg2012.com/img/sears.png" width="142" height="40" border="0" id="sears" style="padding-left: 10px;" /></a>
</div>

#RegStores {
    position:absolute;
    bottom:10px;
    left:23px;
    width:467px;
    height:50px;
    z-index:30;
}

How can I get this to work without making the other images move down. And also, when you run your mouse over an image rapidly it causes the image to keep moving up and up – how can I fix that?.

Answer 1

What I meant in my comment was that the animation is doing that (i.e. adding display: block) .. actually it’s not really adding that in and of itself, but it wraps the item to animate in a div. You can add .ui-effects-wrap { display: inline-block; } to fix this:

http://jsfiddle.net/d7UjD/46/

However, this will only work in browsers that support that, so you may have to use floats instead. You should also probably use a more specific rule (e.g. wrap all of that in its own div) so you don’t impact other effects that use that class. Ideally, jQuery would have a way to change the wrapper class as well. I can’t imagine that it doesn’t..

EDIT: After being castigated by Good Guy Greg for not answering all parts of the multipart question, I created an update here:

http://jsfiddle.net/d7UjD/47/

This will prevent the image from animating on hover while it’s already animating. Personally, this is most desirable for me, but if you want to stop the animation on mouse out (doesn’t make sense to me) or again on mouseover, you will have to do something else.