Slide a div in from off screen and then back on toggle

Question

I am trying to move a div in from off screen and then back on toggle ``` $('a.show').on('click',function() { if($('#left-navi-designers').css('left')=='0px'){ $('#left-navi-designers').animate({left: '-100%'}, 1000); }else{ $('#left-navi-designers').animate({left:0}, 1000); } }); ``` That is what i have for the JavaScript. I have this for my CSS: ``` #left-navi-designers { height: 100%; position: fixed; background: #fff; width: 100%; left: -100%; } ``` This is my HTML: ```

DUH!

DESIGNERS

Accepted Answer

you also can toggle your div with a css transition. This is more quick because you only have to toggle a class. See my example jsfiddle to see what I mean. http://jsfiddle.net/8Wkgf/1/ jquery ``` $('button').on('click', function(){ $('#slider').toggleClass('open'); }) ``` css ``` #slider{ background:blue; height:100px; width:500px; position:relative; left:-520px; } .open{ left:0px !important; } .transition{ -webkit-transition: left 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: left 0.3s ease-out; /* Firefox 4-15 */ -o-transition: left 0.3s ease-out; /* Opera 10.50–12.00 */ transition: left 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ } ``` html ```

```

Slide a div in from off screen and then back on toggle

Solution

Problem