javascript - 在 Jquery 中循环遍历定义大小的元素？

Question

我正在为我的网站创建一个动画，我在其中获得了包含图像的不同 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");    
                });

我真的不知道是否表达清楚了，但我希望你理解正确。预先感谢您的帮助!

Answer 1

而不是遍历所有 div s，你可以分配一个类让我们说 hovered悬停时到 div 以及悬停到另一个 div 时然后使用 class=hovered 找到以前悬停的 div并用动画删除类。并添加 class=hovered到当前悬停的元素。

见下面的代码-

$(".partenaires-aside").mouseover(function () {
   //find previosly hovered div using $(".hovered")
   $(".hovered").each(function () {
            $(this).delay( 800 ).animate({'width':'24%'}, 500);
            $(this).animate({'margin-left':'0%'}, 500);
            $(this).find("p").hide("slow");
            //remove hovered class
            $(this).removeClass('hovered'); 
    });

    $(this).animate({'margin-left':'30%'}, 500);
    $(this).animate({'width':'60%'}, 500);
    $(this).find("p").show("slow");
    //add hovered class
    $(this).addClass('hovered');     
});