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

我的CSS-Transition被跳过？

1 个答案: