我不能等待我的代碼，直到完成在jQuery UI中的切換動畫

Question

我想開發一個帶有jQuery UI動畫的菜單來顯示不同的子菜單，我需要等待，直到切換效果來隱藏控件完成更改菜單的內容。現在我的代碼在切換效果中更改菜單的內容。 要顯示的二級菜單位於id =＃secondary-menu-wrap的'div'中。在這裏面，當隱藏「＃secondary-menu-wrap」的切換效果完成時（代碼的第3行），我需要更改一些'ul'whoose'li'的可見性。現在，代碼在此切換效果期間改變了「＃secondary-menu-wrap」的內容（第4行在第3行的切換效果完成之前運行）。

jQuery(document).ready(function(){ 
    jQuery('#header-menu > li').click(function(){ 
     jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500); 
       jQuery('.secondary-menu > li').css('display','none');    
switch(this.id) { 
    case 'menu-item-group': 
     jQuery('#secondary-menu_group > li').css('display','block'); 
     break; 
    case 'menu-item-research': 
     jQuery('#secondary-menu_research > li').css('display','block'); 
     break; 
    case 'menu-item-projects': 
     jQuery('#secondary-menu_projects > li').css('display','block'); 
     break; 
    case 'menu-item-publications': 
     jQuery('#secondary-menu_publications > li').css('display','block'); 
     break; 
    case 'menu-item-pressroom': 
     jQuery('#secondary-menu_pressroom > li').css('display','block'); 
     break; 
    case 'menu-item-formation': 
     jQuery('#secondary-menu_formation > li').css('display','block'); 
     break 
} 

    jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500); 
     }); 

     jQuery('.T_logo').click(function(){ 
     jQuery('.secondary-menu > li').css('display','none'); 
     }); 
}); 

我想這兩個選項，但沒有期望的結果：

jQuery(document).ready(function(){ 
    jQuery('#header-menu > li').click(function(){ 
     jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500,function(){ 
     jQuery('.secondary-menu > li').css('display','none'); 
}); 



switch(this.id) { 
    case 'menu-item-group': 
     jQuery('#secondary-menu_group > li').css('display','block'); 
     break; 
    case 'menu-item-research': 
     jQuery('#secondary-menu_research > li').css('display','block'); 
     break; 
    case 'menu-item-projects': 
     jQuery('#secondary-menu_projects > li').css('display','block'); 
     break; 
    case 'menu-item-publications': 
     jQuery('#secondary-menu_publications > li').css('display','block'); 
     break; 
    case 'menu-item-pressroom': 
     jQuery('#secondary-menu_pressroom > li').css('display','block'); 
     break; 
    case 'menu-item-formation': 
     jQuery('#secondary-menu_formation > li').css('display','block'); 
     break 
} 

    jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500); 
     }); 

     jQuery('.T_logo').click(function(){ 
     jQuery('.secondary-menu > li').css('display','none'); 
     }); 
}); 

和

jQuery(document).ready(function(){ 
    jQuery('#header-menu > li').click(function(){ 
     jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500).promise().done(function(){ 
     jQuery('.secondary-menu > li').css('display','none');    
}; 



switch(this.id) { 
    case 'menu-item-group': 
     jQuery('#secondary-menu_group > li').css('display','block'); 
     break; 
    case 'menu-item-research': 
     jQuery('#secondary-menu_research > li').css('display','block'); 
     break; 
    case 'menu-item-projects': 
     jQuery('#secondary-menu_projects > li').css('display','block'); 
     break; 
    case 'menu-item-publications': 
     jQuery('#secondary-menu_publications > li').css('display','block'); 
     break; 
    case 'menu-item-pressroom': 
     jQuery('#secondary-menu_pressroom > li').css('display','block'); 
     break; 
    case 'menu-item-formation': 
     jQuery('#secondary-menu_formation > li').css('display','block'); 
     break 
} 

    jQuery('#secondary-menu-wrap').toggle('slide',{direction: 'up'}, 500); 
     }); 

     jQuery('.T_logo').click(function(){ 
     jQuery('.secondary-menu > li').css('display','none'); 
     }); 
}); 

感謝您的幫助

Answer 1

如果我明白你想要什麼正確要實現，那麼你可以簡化你的代碼，如下所示：

$(document).ready(function(){ 
    $('#secondary-menu-wrap > ul').hide(); 

    $('#header-menu > li').click(function(){ 
     menuToShow = this.id.substring(this.id.lastIndexOf('-') + 1); 

     $('#secondary-menu-wrap').slideToggle(500, function(){ 
      $('.secondary-menu').css('display','none'); 
      $('#secondary-menu-'+menuToShow).css('display', 'block'); 
      $(this).slideToggle(500); 
     }); 
    }); 
}); 

開始時我們隱藏了所有的子菜單。點擊#header-menu列表中的一個元素後會觸發，並將子菜單索引存儲在menuToShow變量中。在此之後，我們將在#secondary-menu-wrap包裝元素上觸發slideToggle動畫（請注意：您正在嘗試toggle，但您也收到了slideToggle事件，並且其默認方向已啓用 - 所以我們只會將其持續時間和該函數運行一次完成）。 一旦我們將包裝器關閉，我們確保所有子菜單都隱藏，並且與子菜單索引相匹配的子菜單可見。最後，我們打開包裝。

的jsfiddle演示：Fiddle