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

所以，我在这里得到了一个代码：Fiddle
当您单击“ ShowRed”时，我希望菜单下降，并且应该出现红色框。
这样可行。

现在单击红色部分时，我希望菜单再次出现，红色框应该消失。那也行。

现在，当我单击“ ShowRed”时，红色框再次出现。然后，当我单击“ ShowBlue”时，
我希望菜单再次出现，红色框应该消失，然后出现蓝色框，然后我希望菜单再次出现。但是菜单只是不动！

有任何想法吗？

最佳答案

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