使用 jQuery 让元素在悬停时淡入淡出

Question

我有一个元素包含一个段落，当鼠标悬停在父元素上时，我想短暂地淡入和淡出该段落。我还希望每次用户的指针离开父元素时重置淡入淡出，以便在指针重新进入父元素时复制效果。我还需要它在 IE7 中工作，所以对我来说没有 CSS3。预先感谢推荐的解决方案。 . .

<div id="element">
<p class="child">I need to fade in and out</p>
</div>

#element {
color: #fff;
width: 200px;
height: 200px;
background: #000;
}
.child {
display: none;
}

Answer 1

您可以为此使用 fadeTo() 函数：

$("#element").on("mouseenter", function() {
    $(this).fadeTo("fast", 0.5);
})

$("#element").on("mouseleave", function() {
    $(this).fadeTo("fast", 1);
})

阅读更多：https://api.jquery.com/fadeTo/

编辑：OP 想要闪光灯，OP 得到闪光灯：

$("#element").on("mouseenter", function() {
    $(this).fadeTo(50, 0.5, function() {
         $(this).fadeTo(50, 1);
    });
 })

编辑2： OP 不希望 parents 闪烁（eew），而是他们的 children.. 等等什么？

$("#element").on("mouseenter", function() {
    $(this).find("div").fadeTo(50, 0.5, function() {
         $(this).find("div").fadeTo(50, 1);
    });
 })

关于此的一些注意事项：如果您想要的元素是 parent 的直接 children，则可以将 find() 替换为 children()。 find()一路走来也查grandchildren等

您也可以将 div 替换为您想要的任何选择器。例如，如果你想要所有 children 和 class "flashy"，你可以这样做：find(".flashy")

编辑 3： OP 想要华而不实的东西……一直在闪烁。最终编辑（我认为）：

    //Our Holy Grail (or whatever you want to name it.
    var disco = "";

    //Activate discotime!
    $("#element").on("mouseenter", function ()
    {
        disco = setInterval(function ()
        {
            $(element).find("p").fadeToggle(100);
        }, 200);

    });

    //Stop discotime :'(
    $("#element").on("mouseleave", function ()
    {
        $(this).find("p").fadeIn(100);
        clearInterval(disco);
    });

使用 jQuery 让元素在悬停时淡入淡出

Get Element to Fade in and Out on Hover with jQuery

jquery

jquery-ui