jquery - 如何在将鼠标悬停在图像上时切换淡入淡出 DIV

Question

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 在单击图像时缓慢淡入，在再次单击时缓慢淡出。但这并没有发生。

我该如何解决这个问题。

Answer 1

你需要的是:

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

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

注意:click 事件只接受一个函数作为参数。 Learn more here .