Toggle CSS animation with jQuery?

Question

I'm making a simple slide down mobile menu, and I want it to move the whole site down 275px so it can have room for the mobile menu. Make your browser width small, until you can see the list icon at the top right. Then, click it. You'll notice the whole site (everything in the globe class) is moved down 275 pixels via -webkit-animation (Im a jquery noob). You should also notice the ease of the animation; in contrast to the abrupt movement when you press it again. If you keep toggling the icon you'll see the difference. I want the globe class to toggle that css animation some how; so when you toggle the icon, it will gingerly transition from 275px to 0px.

$("#mobile").click(function () { // when icon is clicked, do the following:
    $("#m-nav").slideToggle(300); // side down the navigation
    $("#globe").toggleClass("translation"); // slide down the whole site 275px 
});

Here is the fiddle:: http://jsfiddle.net/7V5W5/3/

Answer 1

You don't have reverse animation added in code: http://jsfiddle.net/7V5W5/13/

$("#mobile").click(function () {
    $("#m-nav").slideToggle(300);
    if ($('#globe').hasClass('translation')) {
        $("#globe").removeClass("translation").addClass("translation-reverse");
    } else {
        $("#globe").removeClass("translation-reverse").addClass("translation");
    }
});