2014-09-01 219 views
0

我的問題在於,我有一個圖像和標題網格,它們都具有相同的類別。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'}); 
     } 
    ); 
}); 

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

+0

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

回答

0

嘗試......

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

+0

謝謝,你是男人! – 2014-09-01 08:50:34

+0

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

1

試試這個:

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

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

0

這隻會動態顯示圖像上,您將徘徊: -

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()

相關問題