J Query problem where the image slides down but then fades out when i move the mouse. I tried using a delay but it doesn't look as good. Any fixes
J Query:
<script src="jquery.js">
</script>
<script>
$(function() {
$("#SeeAllEvents").hide();
var timeoutId;
$("#facebook").hover(function() {
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$("#facebook1").stop(true,true).slideDown('10000');
}, 500);
}
},
function () {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$("#facebook1").fadeOut('slow');
}
});
});
</script>
CSS:
#facebook {
position:fixed;
top:238px;
right:195px;
}
#facebook:hover {
opacity: 0.6;
}
#facebook1 {
position:fixed;
top:238px;
right:195px;
display:none;
}
HTML:
<img id="facebook" src="images/facebook.png"
height="60" width="60">
</a>
<img id="facebook1" src="images/facebook1.png"
height="60" width="60">
</a>