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>

基本上是一堆连续的，都带有图标类。将动画应用于图标类将为所有div设置动画。我的问题是如何将它与我的鼠标隔离开来。

无关，但如果有人知道为什么有时候悬停触发的动画（基本上是鼠标进入/退出）会多次触发（有时是无限期），我会很感激。可能是我的浏览器或其他东西，在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');
    }
);

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

1 个答案: