3

我正在尝试使一些图像“反弹”。

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;
}

如何在不使其他图像向下移动的情况下使其正常工作。而且，当您在图像上快速移动鼠标时，它会导致图像不断向上移动 - 我该如何解决这个问题？

4

3 回答 3

4

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

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

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

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

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

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

于 2012-05-15T18:20:05.680 回答
3

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

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

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

​</p>

于 2012-05-15T18:37:07.813 回答
1

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

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

您可以像这样缩短代码。

于 2012-05-15T18:25:24.107 回答