在悬停时将 class 添加到该特定子项，而不影响具有相同 class 的其他 div

Question

现在我有一个图像网格（通过 bootstrap 设置）。悬停时，图像会变大一点，并改变不透明度。但是，我刚才提到的效果会应用于所有图标。虽然我知道我可以通过让每个图标都有自己的 ID 或其他东西来解决这个问题，但这似乎没有必要。

    $('.icon').hover(  
   function(){  
     /* Add 'activeIcon' class to specific img element nested in the div with the 'icon' class */
    $('.activeIcon').animate({
         width: "225px", 
         height: "225px",
         opacity: 1,
         left: "-10px",
         top: "50px"
      }, 300);  
   },
   function(){  
     $('.activeIcon').animate({
         width: "200px", 
         height: "200px",
         opacity: 0.5,
         left: "0px",
         top: "50px"
     }, 300);  
     /*Remove that class from that img */    
});

简要说明 html 的样子 -

       <div class="col-sm-3">
             <div class="icon">
                 <img src="http://placehold.it/200x200">
                 <p>title of this thing</p>
             </div>
         </div>

基本上是一堆连续的，都带有图标 class。将动画应用于图标 class 将为所有 div 设置动画。我的问题是如何让它隔离我鼠标悬停的那个。

无关，但如果有人知道为什么有时由悬停（基本上是鼠标 enter/exit）触发的动画会触发多次（有时无限期），我将不胜感激。可能是我的浏览器之类的，在 Fiddle 中工作正常。

Answer 1

试试这个：

$('.icon').hover(  
    function() {  
        /* Add 'activeIcon' class to specific img element nested in the div with the 'icon' class and animate it */
        var $icon = $(this);
        $icon.find('img')
            .addClass('activeIcon')
            .animate({
                width: "225px", 
                height: "225px",
                opacity: 1,
                left: "-10px",
                top: "50px"
            }, 300);
    },
    function() {  
        /* Animate the 'activeIcon' image and remove the class */
        var $icon = $(this);
        $icon.find('img.activeIcon')
            .animate({
                width: "200px", 
                height: "200px",
                opacity: 0.5,
                left: "0px",
                top: "50px"
            }, 300)
            .removeClass('activeIcon');
    }
);

在悬停时将 class 添加到该特定子项，而不影响具有相同 class 的其他 div

Add class to that specific child on hover without affecting others divs with same class

jquery

parent-child

jquery-hover