javascript - When mouseleave inside the slideffect time the text stays -

my intention when hover on #portfolioitem1 div text slides , when leave text goes away again. code works if hover on div , move away instantly(eg 0.3 sec) when slidedown effect working.

then text not go away , stays there. , have hover on again , remove mous after 0.3 seconds work.

anyone idea?

javascript

 $('#text').hide();  $('#portfolioitem1').hover(function (){     $(this).css('background-color', '#e95850');     $('#text').slidedown(300); }); $('#portfolioitem1').mouseleave(function (){     $(this).css('background-color', '#999999');     $('#text').hide(); }); 

html

 <div id="portfolioitem1"><div id="text">vgregvre</div></div> 

try this:

$('#text').hide(); $('#portfolioitem1')   .hover(function() {     $(this).css('background-color', '#e95850');     $('#text').slidedown(300);   }, function() {     $(this).css('background-color', '#999999');     $('#text').hide();   }); 

demo