我希望延遲下拉隱藏和動畫的同時

Question

下面是代碼，懸停在li物品的標籤動畫時，並生長270px同時打開下拉含有相同的寬度的輸入字段的div，但是當我移動鼠標移出dropdown股利或儘量選擇一些從選項列表下拉關閉，我想有一些延遲或其它解決方案，這個問題

$(function() { 
      /** 
      * the menu 
      */ 
      var $menu = $('#ldd_menu'); 

      /** 
      * for each list element, 
      * we show the submenu when hovering and 
      * expand the span element (title) to 270px 
      */ 
      $menu.children('li').each(function(){ 
       var $this = $(this); 
       var $span = $this.children('span'); 
       $span.data('width',$span.width()); 

       $this.bind('mouseenter',function(){ 
        $menu.find('.ldd_submenu').stop(true,true).hide(); 
        $span.stop().animate({'width':'270px'},300,function(){ 
         $this.find('.ldd_submenu').slideDown(300); 
        }); 
       }).bind('mouseleave',function(){ 
        $this.find('.ldd_submenu').stop(true,true).hide(); 

        $span.stop().animate({'width':$span.data('width')+'px'},300); 
       }); 
      }); 
     }); 

Answer 1

不是在jQuery的完全肯定，但關於該項目直JavaScript的點擊給它的焦點和重點被保留，直到你點擊其他地方，所以你想做的是測試失去焦點（我猜mouseente r/mouseleave檢查鼠標是否懸停在項目上）。

定時器並不是真的要這樣做，因爲不同的人可能會考慮菜單上的選項比其他選項更長，並且你想給它們自由做這些。

Answer 2

嘗試添加delay()：

....bind('mouseleave',function(){ 
     $this.find('.ldd_submenu').delay(300).stop(true,true).hide(); 
     $span.delay(300).stop().animate({'width':$span.data('width')+'px'},300); 
     });