我正在尝试使一些图像“反弹”。
$('#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&" 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&status=completePageLink&listId=HCoY5fRCrcOOxRCdNn3i6g&registryType=WD&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&catalogId=12605&langId=&externalId=900040792636010101&grUserType=BUYER&fwdURL=GRGuestRegistryView&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;
}
如何在不使其他图像向下移动的情况下让它工作。而且,当您在图像上快速移动鼠标时,它会导致图像不断向上移动 - 我该如何解决这个问题?
最佳答案
我在评论中的意思是动画正在执行此操作(即添加 display: block
).. 实际上它并没有真正添加它本身,而是将元素包装起来以进行动画处理在一个分区中。您可以添加 .ui-effects-wrap { display: inline-block;
解决这个问题:
但是,这只适用于支持它的浏览器,因此您可能不得不使用 float 代替。您可能还应该使用更具体的规则(例如,将所有这些都包装在自己的 div 中),这样您就不会影响使用该类的其他效果。理想情况下,jQuery 也有办法更改包装器类。我无法想象它不会..
编辑:在被 Good Guy Greg 批评没有回答多部分问题的所有部分之后,我在这里创建了一个更新:
这将防止图像在已经设置动画时在悬停时设置动画。就个人而言,这对我来说是最理想的,但如果你想在鼠标移开时停止动画(对我来说没有意义)或再次在鼠标悬停时停止,你将不得不做其他事情。
关于jquery - 使用 jQuery 弹跳图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10606329/