用于多种用途的 FadeIn 类答案

【问题标题】：FadeIn class for multiple usage用于多种用途的 FadeIn 类
【发布时间】：2012-08-08 06:54:12
【问题描述】：

我想要一个简单的 Jquery 解决方案，用于将鼠标悬停在“容器”类上并淡入“叠加层”。在这个简单的 Jquery 代码中，将显示所有“容器”的所有“覆盖”。有没有人知道一个简单的解决方案来淡化这个类中“覆盖”的“覆盖”？

谢谢。

$('.overlay').hide();
$('.container').hover(function() {
    $('.overlay').fadeToggle(300);
});

<!-- container 01 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 02 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 03 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

【问题讨论】：

标签： jquery click hover toggle

【解决方案1】：

$('.container').hover(function() {
    $(this).find('.overlay').fadeToggle(300);
});

http://jsbin.com/owehim/1/

【讨论】：

嘿伙计，我已经尝试过这个解决方案。但它不起作用:(不知道为什么！所有的“覆盖”都会显示出来。
你对此有什么解释吗？或任何其他解决方案？
$('.overlay') 搜索具有此类的所有元素。这就是为什么在您的示例中所有覆盖都被切换的原因。在我的示例中，我们搜索 $(this) 内的所有叠加层，即悬停的 .container。