$(function(){ var i=0,j=0; function getHourTime(datetime){ var time={ hours:datetime.getHours(), seconds:datetime.getSeconds(), miliseconds:datetime.getMilliseconds() } return time.hours+':'+time.seconds+':'+time.miliseconds; } $('.btn').hover(function(){ $('.dropdown').stop(false,false).slideDown(4000,function(){ i++; console.log('mouseEnter:'+i+', time is:'+getHourTime(new Date())); }); },function(){ $('.dropdown').stop(false,false).slideUp(4000,function(){ j++; console.log('mouseout....'+j+', time is:'+getHourTime(new Date())); }); }); });
<a href="#" class="btn">hover me</a> <div class="dropdown"> <ul> <li>lalalal1</li> <li>lalalal3</li> <li>lalalal2</li> </ul> </div>
* { margin:0; padding: 0; } body { font:12px/1.5 arial; margin: 40px; } .btn { display: block; border: 1px solid orange; background: #eee; color: #666; width: 10em; height: 24px; line-height: 24px; text-align: center; text-decoration: none; } .dropdown { display: none; } .dropdown ul { list-style: none; background: #eee; width: 200px; border: 10px solid orange; margin-top: 2px; } .dropdown ul li { line-height: 2; }