in the following code i'm trying to get it so that the div in the html moves to the left as indicated when clicked and back to the right when clicked again, but when i click it a second time, it snaps back to 95% (no animation) and reanimates to 70%... i am so confused... why is it doing that?

Code:
function slide(target){
	if($(target).css({left:'95%'})){
		$(target).animate({left:'70%'}, 300);
	}
	else if($(target).css({left:'70%'})){
		$(target).animate({left:'95%'}, 300);
	}
}
and here is the html
Code:
  <div id='slider' class='one' onclick='slide(this)'></div>
  <div id='slider' class='two' onclick='slide(this)'></div>
  <div id='slider' class='three' onclick='slide(this)'></div>
  <div id='slider' class='four' onclick='slide(this)'></div>
  <div id='slider' class='five' onclick='slide(this)'></div>
and the css
Code:
#slider {position:absolute; height:50px; background:#c4bb00; width:500px;
   left:95%; box-shadow:4px 5px 5px black; border-radius:25px 0px 0px 25px;
   z-index:2;}
    #slider.one {top:60px;}
    #slider.two {top:120px;}
    #slider.three {top:180px;}
    #slider.four {top:240px;}
    #slider.five {top:300px;}