CODEWITHSUNDEEP
jqueryhtmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to toggle fade a DIV when hovered over an image

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/

I would like the DIV to fade in slowly when the image is clicked and fade out slowly when it is clicked again. But that is not happening.

How can I resolve the issue.

Upvotes: 3

Views: 41

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

What you need is this:

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

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

Note: The click event only take one function as argument. Learn more here.

Upvotes: 4

Related Questions