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上时

回答

相关问题