javascript - 我的 CSS-Transition 被跳过了？

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);    
}