Animate div當鼠標懸停在另一個div上時

我的問題在於，我有一個圖像和標題網格，它們都具有相同的類別。Animate 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(.front-menu-title).animate({height:'50'}); 
     }, 
     function() { 
      jQuery(.front-menu-title).animate({height:'25'}); 
     } 
    ); 
});

但顯然這導致所有在網格中進行動畫，當時我只是想有問題的人會受到影響。

來源

2014-09-01 Joe northern

你可以用短選擇符''替換'jQuery'。此外，您的課程需要介於qoutes之間。 – timo 2014-09-01 08:49:10

嘗試......

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）。

來源

2014-09-01 08:48:02 Archer

謝謝，你是男人！ – 2014-09-01 08:50:34

沒問題 - 高興幫忙:) – Archer 2014-09-01 08:51:39

試試這個：

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

您可以使用此在事件處理中引用當前對象。

來源

2014-09-01 08:50:49 ngergo6

這隻會動態顯示圖像上，您將徘徊： -

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

爲了更多地瞭解。點擊之間的差異（）和。對（「點擊」），在這裏參考，Difference between .on('click') vs .click()

來源

2014-09-01 09:10:43

Animate div當鼠標懸停在另一個div上時

回答

相關問題