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:

<div id="left-icons"><a class="show" style="color:#999;">DUH!</a></div>
<div id="left-navi-designers">
 <div id="topNavigation">
<ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>
<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>
<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>
<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>
<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>
<a href="#box1" class="button"><li>MEDIA KIT</li></a>
<a href="#box1" class="button"><li>BEAUTY</li></a>
<a href="#box1" class="button"><li>BRANDS</li></a>
<a href="#box1" class="button"><li>MODELS</li></a>
<a href="#box1" class="button"><li>PARTIES</li></a>
 </ul></div>

I'm very new to this and am just trying to get some things figured out. Here is the site i am playing on .html

Thanks in advance!

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:

<div id="left-icons"><a class="show" style="color:#999;">DUH!</a></div>
<div id="left-navi-designers">
 <div id="topNavigation">
<ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>
<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>
<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>
<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>
<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>
<a href="#box1" class="button"><li>MEDIA KIT</li></a>
<a href="#box1" class="button"><li>BEAUTY</li></a>
<a href="#box1" class="button"><li>BRANDS</li></a>
<a href="#box1" class="button"><li>MODELS</li></a>
<a href="#box1" class="button"><li>PARTIES</li></a>
 </ul></div>

I'm very new to this and am just trying to get some things figured out. Here is the site i am playing on http://keithfrenchdesigns./RunwayMag/designers_main.html

Thanks in advance!

• javascript
• jquery
• html
• css

• And the problem is? works fine if I copy/paste your code like here jsfiddle/wm3c4 – DaniP Commented Jan 28, 2014 at 20:40
• I just tried it and it works jsfiddle/dJyFM Make sure you're loading your scripts and jQuery correctly. – dabadaba Commented Jan 28, 2014 at 20:42
• It must be the jQuery loading issue. Thanks guys! – user3158473 Commented Jan 28, 2014 at 22:36

4 Answers 4

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/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

<button>slide</button>
<div id="slider" class="transition"></div>

Your code works and I see you have included jQuery UI, so instead using animate and negative left, you can use visibility and toggle with animation:

Display or hide the matched elements.

Code:

$('a.show').on('click', function () {
    $('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});

Demo: http://jsfiddle/IrvinDominin/r7m3C/

You can use this functions.

function SlideIn(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "10px";
}
function SlideOut(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "-200px";
}

// Use this buttons, for example.
<button onclick="SlideIn('box1')">Slide in</button>
<button onclick="SlideOut('box1')">Slide out</button>

<div id="box1">Put something in here</div>

This is just an example, try it at your own boxes.

I have tried your code like here http://jsfiddle/wm3c4/. And it works just fine the only problem I see is in your page you have this:

$('a.show').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

But there is no element with id="website". Try to change that selector to the one you post here.