CODEWITHSUNDEEP
javascriptjquerycsscss-transitionstransition
Dominik Seemayr
Dominik Seemayr

Reputation: 889

My CSS-Transition get skipped?

So, I got a code here: Fiddle

When you click "ShowRed", I want the menu to go down and the red box should appear. That works.

When I click the red section now, I want the menu to come up again, and the red box should disappear. That also works.

Now, when I click "ShowRed", the red box appears again.
Then when I click "ShowBlue", I want the menu to come up again, the red box should disappear, than the blue box should appear and then I want the menu to go down again.
But the menu just doesn't move!

Any ideas?

Upvotes: 1

Views: 302

Answers (1)

byksl
byksl

Reputation: 106

SetTimeout function works asynchronously, that is, it executes the statements below the setTimeout before it finishes the statements inside. That is the problem with your code. You can write it this way : 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);    
}

Upvotes: 2

Related Questions