Question

我试图让一些图像“反弹”。

$('#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;
}

如何才能让无需让其他图片向下移动。而且，当您将鼠标快速移动到图像上时会导致图像不断向上和向上移动 - 我该如何解决？

Answer 1

我在评论中的意思是动画正在这样做（即添加display: block）..实际上它并没有真正添加它本身，但它包装项目在div中动画。您可以添加.ui-effects-wrap { display: inline-block; }来解决此问题：

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

但是，这只适用于支持该功能的浏览器，因此您可能不得不使用浮点数。您还应该使用更具体的规则（例如，将其全部包装在自己的div中），这样您就不会影响使用该类的其他效果。理想情况下，jQuery也可以改变包装类。我无法想象它不会......

编辑：在被Good Guy Greg严厉批评而没有回答多部分问题的所有部分之后，我在这里创建了一个更新：

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

这将阻止图像在悬停时动画，同时它已经是动画。就个人而言，这对我来说是最理想的，但是如果你想停止鼠标移动（对我来说没有意义）或者在鼠标悬停时停止动画，你将不得不做其他事情。

Answer 2

这是一个主要修复将其驱动到顶部的能力。我这样做是通过将鼠标移动到鼠标输出的起始位置来实现的。还做了一些其他的改进。值得注意的是切换到hover并将类应用于每个链接，而不是为每个链接使用单独的事件绑定器。

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

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

Answer 3

这是一个建议。我把它放在这里因为它在评论中看起来不太好看

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

您可以像这样缩短代码。

用jQuery弹跳图像

3 个答案: