CODEWITHSUNDEEP
jquerycss
StealthRT
StealthRT

Reputation: 10542

Bouncing images with jQuery

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?.

Upvotes: 3

Views: 2124

Answers (3)

mrtsherman
mrtsherman

Reputation: 39872

Here is one that mostly fixes the ability to drive it up to the top. I do this by animating ti back down to its starting position on mouse out. Also made some other improvements. Notably switching to hover and applying a class to each of the links instead of using a separate event binder for each.

http://jsfiddle.net/EcN2h/2/

$('.bounce').hover(function() {
    $('img', this).stop(true, true).effect('bounce', 500);
}, function() {
    $('img', this).stop(true, true) );
});
​

​

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191749

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.

Upvotes: 4

Imdad
Imdad

Reputation: 6042

This is a suggestion. I'm putting it here as it would not look pretty in comment

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

You can shorten your code like this.

Upvotes: 1

Related Questions