懸停在另一個div上時對div進行動畫處理

Question

我的問題是，我有一個圖像網格和這些圖像的標題，它們都具有相同的類。

因此，網格中每個圖像和標題的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(.front-menu-title).animate({height:'50'});
         },
        function () {
            jQuery(.front-menu-title).animate({height:'25'});
        }
    );  
});

但是很顯然，當我只希望受影響的那個對象受到影響時，這會使網格中的所有對象動畫化。

Answer 1

嘗試這個：

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

您可以在事件處理程序中使用它來引用當前對象。

Answer 2

嘗試這個...

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'});
        }
    );  
});

它為事件處理程序分配了相同的內容，但是在其中查找相對於您要懸停的內容的具有title類的下一個元素（請參閱this的用法）。

Answer 3

這只會使您要在其上徘徊的圖像設置動畫：-

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'） 之間的區別的信息 ，請參考.on（'click'）與.click（）之間的區別