Как переключать исчезать 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.