Jquery 悬停在另一个div上时设置div动画

我在这里的问题是，我有一个网格的图像和标题，这些图像都有相同的类

因此，网格中每个图像和标题的HTML是

<a href="">
<div class="front-menu-image">
<img src="" width="224" height="224"/>
</div>
<div class="front-menu-title">TITLE</div>
</a>

但很明显，这导致网格中的所有内容都被设置为动画，而我只是想让有问题的那个受到影响。

试试这个

jQuery(document).ready(function($){
    jQuery('.front-menu-image').hover(
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'50'});
         },
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'25'});
        }
    );  
});

它为事件处理程序分配相同的属性，但在其中查找标题类为的下一个元素，与您悬停的内容相关（请参见使用

this

）。

尝试以下操作：

$(function(){
  $(".front-menu-image").hover(
    function(){
      $(this).siblings(".front-menu-title").animate({height: '50'})
    }
  );
});

---

您可以在事件处理程序中使用this来引用当前对象。

这将仅为您将悬停的图像设置动画：-

jQuery(document).ready(function($){

jQuery('.front-menu-image').on('hover', function () {
        jQuery(.front-menu-title).animate({height:'50'});
     },
    function () {
        jQuery(.front-menu-title).animate({height:'25'});
    }
);  
});

---

有关.click（）和.on（'click'）之间区别的更多信息，请参阅此处

您可以使用短选择器替换

jQuery

：

$

。此外，您的课程需要介于两个qoutes之间。没问题-乐意帮助：）

jQuery(document).ready(function($){

jQuery('.front-menu-image').on('hover', function () {
        jQuery(.front-menu-title).animate({height:'50'});
     },
    function () {
        jQuery(.front-menu-title).animate({height:'25'});
    }
);  
});