我正在为我的网站创建一个动画,其中我得到了包含图像的不同div,另外我在文本中描述了与图像相关的内容。旁边比我的图片宽一点,发生的事情是,当我将它悬停时,它向右滑动并且宽度增加。
当我悬停另一个时,第一个回到初始位置。所以我找到了一个解决方案,迫使我自然地循环遍历所有没有徘徊的div,但现在的问题是因为每个div(包括最后一个徘徊的)都不会徘徊,它们都会得到动画(因此会产生视觉错误)因为旁边是绝对的,并且放在图像后面)而我希望它只在第一个上面。
所以我认为我应该循环遍历所有没有徘徊的div并获得一个定义的大小(他们在显示之后得到的那个),但是我无法让它工作,我也找不到循环的解决方案具有每个功能的元素......
这是我的HTML代码:
<div class="partenaires-wrapper">
<img src="http://mylor.fr/mauro/wp-content/uploads/2014/08/sharks.png" alt="" width="223" height="138" />
<div class="partenaires-aside">
Sed rutrum elementum odio, ut efficitur magna efficitur sit amet. Phasellus posuere eget felis non tempor. Morbi elementum, velit non aliquam suscipit,
odio orci viverra felis, sit amet elementum tellus mauris a nunc.
Aliquam nec nisl eget nunc pulvinar varius commodo id urna. Duis ac sem erat. Pellentesque aliquet posuere justo ac luctus. Aliquam porta placerat blandit.
</div>
和Javascript部分:
$(".partenaires-aside").mouseover(function () {
$(".partenaires-aside").not(this).each(function () {
$(this).delay( 800 ).animate({'width':'24%'}, 500);
$(this).animate({'margin-left':'0%'}, 500);
$(this).find("p").hide("slow");
});
$(this).animate({'margin-left':'30%'}, 500);
$(this).animate({'width':'60%'}, 500);
$(this).find("p").show("slow");
});
我真的不知道自己是否清楚,但我希望你理解正确。提前谢谢你的帮助!
答案 0 :(得分:1)
您可以在悬停时以及当您悬停到另一个div
时为div分配一个让我们说hovered
的类,而不是循环遍历所有div
,然后使用{找到preiosly hovered div {1}}并删除带动画的类。并将class=hovered
添加到当前悬停的元素中。
见下面的代码 -
class=hovered