How to switch to DIV when dropped 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 slowly fade out when the image is clicked and slowly fade out when it is clicked again. But that doesn't happen.

How can I solve the problem.