Currently, I am in the process of designing an animation for my website. The animation involves different divs that each contain an image and a description related to that image within an aside element. The width of the aside is slightly wider than the image, and when hovered over, it slides to the right and expands its width.
The issue arises when hovering over another div, causing the previously hovered one to return to its original position. My initial solution was to loop through all the non-hovered divs, but this resulted in all divs (including the last hovered) triggering the animation simultaneously, leading to a visual bug as the aside is absolutely positioned behind the image. Ideally, only the first div should have the animation effect.
I attempted to refine my approach by looping through non-hovered divs with a defined size (after being shown), but I was unable to make it work. I also struggled to find a solution using the 'each' function to target specific elements.
Below is a snippet of my HTML code:
<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>
And here is the corresponding Javascript section:
$(".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");
});
If my explanation is unclear, I apologize, and I appreciate any assistance you can provide. Thank you!