Question

I have the JavaScript code to fadein.fadeout the menu, when ever user hovers it.

I want to convert JavaScript fadein fadeout to jQuery fadein fadeout.

Please help me to sort out this thing, i want jQuery because it loads in fadein fadeout style rather in a jurk in javascript

<style type="text/css">
     #div1 {  
         visibility: hidden;  
     }
</style>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
    <div id="div1">
    </div>
</div>

<script>
    function show(id) {
        document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
        document.getElementById(id).style.visibility = "hidden";
    }
</script>

Answer 1

jsFiddle

<div id="outer">
    <div id="inner">Test</div>
</div>​

$("#outer").hover(function() {
    $('#inner').fadeIn();
}, function() {
    $('#inner').fadeOut();
});​

Although it’s generally advisable to make menus out of something a little more semantic like <ul>s