Geek asks and answers

Bouncing images using jQuery

I'm 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 other images moving down. And also, when you quickly move the mouse over the image, this leads to the fact that the image continues to move up and up - how can I fix it?

+3
source share
3 answers

What I had in mind in my comment is that the animation does this (for example, adding display: block) .. in fact it does not add this on its own, but it wraps the element for animation in a div. You can add .ui-effects-wrap { display: inline-block; }to fix this:

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

, , , , . , (, div), , . jQuery -. , .

EDIT: , Good Guy Greg , , :

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

. , ( ) , - .

+4

, . , ti . . , hover .

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

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

+3

This is an offer. I put it here since it does not look beautiful in the 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 as follows.

+1
source

More articles:


All Articles