호버업 메뉴에서 슬라이드 및 슬라이딩 다운

Question

슬라이더가 hover() 인 메뉴가 나타납니다. 나는이 슬라이더를 보여줍니다이

$(".menu2").hover(function() 
{ 
$(".slider").slideDown(500); 
    $(".slider").css('display','block');  
}, 
    function() { 
    $(".slider").slideUp(500);  
//$('.slider').css("display","none"); 

}); 

처럼 작성했습니다. (I 잘보고 slideDown() 및 slideUp()를 사용하려면). cursor을 슬라이더로 이동하면 display:none 상태로 돌아갑니다. 그래서 내가 menu에서 내 커서를 이동 한 후 display:none 상태로이 내 슬라이더를 설정이

$(".sliderHolder").hover(function() 
{ 
    $(".slider").css('display','block');    
}, 
    function() { 

$(".slider").slideUp(500); 

}); 

}); 

을 시도했다. 이 작업을 수행하는 쉬운 방법이 있습니까?

Answer 1

당신은 당신이하지 부울을 사용하여 데이터 속성으로에 전달할 수

http://jsfiddle.net/jUraw/1369/

 <ul id="nav"> 
     <li><a href="home.html"><span>M</span>enu</a> 
      <ul> 
       <li><a href="fashion.html"><span>F</span>ashion</a></li> 
       <li><a href="about-us.html"><span>A</span>bout <span>U</span>s</a></li> 
       <li><a href="find-us.html"><span>F</span>ind <span>U</span>s</a></li> 
       <li class="underline"><a href="http://www.bellissimafashions.com/blog/"><span>B</span>log</a></li> 
      </ul> 
     </li>  
    </ul> 


$(document).ready(function(){ 
    var t = null; 
    $('#nav li').hover(function(){ 
     var that = this; 
     t = setTimeout(function(){ 
      $('ul', that).slideDown(200); 
      t = null; 
     }, 300); 
    }, function(){ 
     if (t){ 
      clearTimeout(t); 
      t = null; 
     } 
     else 
      $('#nav li ul').slideUp(200); 
    }); 
});