JavaScript Function To Trigger CSS3 Transition not working

Question

Hi i am having problems with a transition of mine that gets called when a button is pressed. The reason i am confused is because it worked before but then i moved it onto a different div and now its not? when i mean its not working i mean that the function works (as in it does do something) and then runs the callback but when it switches the class' it doesn't 'animate' it. The div just stays there till the animation time is over and then runs the callback which hides it.

So basically it just hides it but doesn't animate the slide out effect that it should do.

the rest of the switchClass functions work fine even the one which makes the page slide back in.

The Code That Isn't Functioning Properly:

function hidepage() {
        $( ".PageShow" ).switchClass("PageShow", "PageHide", loadpanel);
// Alternative $( "PageContainer" ).switchClass("PageShow", "PageHide", loadpanel);
    };

And the rest of the code that goes with it...

CSS:

#PageContainer {
   margin-top:120px;
   width:100%;
}

.PageShow {
   position:fixed;
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -webkit-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

.PageHide {
   position:fixed;
   -webkit-transform:translate(-100%,0px);
   -moz-transform:translate(-100%,0px);
   -ms-transform:translate(-100%,0px);
   -o-transform:translate(-100%,0px);
   transform:translate(-100%,0px);
   transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

Answer 1

If you change your method .switchClass() to .removeClass() and .addClass() it will work. Look at this jsFiddle. There are two functions one is called .hidepage() which is the one with .removeClass and .addClass and the second function is .hidepagetwo() which uses .switchClass()

The real mistake is: there is a }); missing at the end, at least in jsFiddle you code works after adding this.