如何在鼠标悬停在图片上时切换淡入淡出效果的 DIV

Question

如何在鼠标悬停在图片上时切换淡入淡出效果的 DIV

3

HTML：

<img src="rInfo.png" id="imgUserInfo" style="position: absolute; right: 25px; top: 0; margin: 5px 0 0 0;" />
<div class="showUserInfo" id="showUserInfo">
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        TEST DIV
    </div>
</div>

JQuery:

$("#imgUserInfo").on("click", function (e) {
    $('#showUserInfo').fadeIn("slow");
}, function () {
    $('#showUserInfo').fadeOut("slow");
});

CSS：

.showUserInfo {
    position: absolute;
    background: #243942;
    border: 4px solid #E55302;
    overflow: hidden;
    right: 45px;
    min-height: 100px;
    width: 300px;
    top: 55px;
    z-index: 200;
    text-align: left;
    padding: 10px;
    color: #C0C0C0;
    display: none;
}
.showUserInfo:after, .showUserInfo:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.showUserInfo:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.showUserInfo:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

FIDDLE: http://jsfiddle.net/yjhbf9a9/4/

当点击图片时，我希望 DIV 缓慢淡入，并在再次点击时缓慢淡出。但实际上并没有发生这种效果。

如何解决这个问题。

- SearchForKnowledge

I had to wait as per SO :) - SearchForKnowledge

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lmgonzalves · Accepted Answer

你需要的是这个：

您需要的是：

$('#showUserInfo').fadeToggle("slow");

FIDDLE: https://jsfiddle.net/lmgonzalves/yjhbf9a9/5/

注意： click 事件只接受一个函数作为参数。在这里了解更多。