我的CSS轉換被跳過？

Question

所以，我在這裏得到了一個代碼：Fiddle

當你點擊「ShowRed」時，我想要菜單下來，紅色框應該出現。 這是有效的。

當我點擊紅色部分，我想菜單再次出現，紅色框應該消失。 這也適用。

現在，當我點擊「ShowRed」時，紅框再次出現。
然後當我點擊「ShowBlue」， 我想要菜單再次出現，紅色框應該消失，比藍色框應該出現然後我想菜單再次下降。
但菜單只是不動！

任何想法？

Answer 1

SetTimeout函數異步工作，也就是說，它在完成內部語句之前執行setTimeout下方的語句。這是你的代碼的問題。你可以這樣寫：http://jsfiddle.net/EW7aE/17/

var CurrPrev = ""; 
function showbox(ToShow) { 

    if(ToShow != CurrPrev){ 
     if(CurrPrev != ""){ 
      /*hidebox();*/ 
      hideshow(ToShow); 
     } 
     else { 
      $(ToShow).css({'display': 'block'}); 
      $('#menu').css({'margin-top': '100px'}); 
      $('#menu').css({'height': '70px'}); 
      CurrPrev = ToShow; 
     } 
    } 
} 

function hideshow(ToShow) { 
    $('#menu').css({'height': '100px'}); 
    $('#menu').css({'margin-top': '0px'}); 

    setTimeout(function(){ 
     $(CurrPrev).css({'display': 'none'}) 
     CurrPrev = ""; 
     $(ToShow).css({'display': 'block'}); 
     $('#menu').css({'margin-top': '100px'}); 
     $('#menu').css({'height': '70px'}); 
     CurrPrev = ToShow; 
    },500); 
} 

function hidebox() { 
    $('#menu').css({'height': '100px'}); 
    $('#menu').css({'margin-top': '0px'}); 

    setTimeout(function(){ 
     $(CurrPrev).css({'display': 'none'}) 
     CurrPrev = ""; 
    },500);  
}