jquery - how to show element when mouse hold on it -

i have 1 ul , many li in it. want when mouse hold on in li 3 second show me 1 div , when leave mouse element div hide. many search in google , understand should use fadein , fadeout don't know how use those. want when click on li show me 1 alert. please guide me because i'm confused.

thanks lot

this code: html:

<ul id="friend-list">         <li id="1"></li>         <li id="2"></li>         <li id="3"></li>         <li id="4"></li>         <li id="5"></li>         <li id="6"></li> </ul> 

jquery:

$(document).on('mouseover','#friend-list li',function(){     $('#center-side').fadein('slow'); }); $(document).on('mouseout','#friend-list li',function(){     $('#center-side').stop().fadeout('slow'); });  $(document).on('click','#friend-list li',function(){     alert('aaaaaaaaa'); });  

you can use this:

                        var timer = null;                         $('#friend-list li').hover(function() {                             var $el = $('#center-side');                             cleartimeout(timer);                             timer = settimeout(function() {                                 $el.css('display','block');                             }, 1500);                         }, function() {                             cleartimeout(timer);                             timer = settimeout(function() {                                 $('#center-side').css('display','none');                             }, 10);                          });