using if condition in animate function

[extemer]

what i am trying to do is when i click the div it decreases to width=100px and when i click it again it changes it to original size but i am getting the problem in the second part where i want to re size it to original size i known i got the problem in using

animate()

method in

if

statement.can someone fix this problem for and correct my syntax for

animate()

method in

if

statement.

code is below

else part is not working

<script type="text/javascript">

$(document).ready(function(){

$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").css('width','800px');



	$("#testing").click(function(){
								 if($("#testing").css('width') == ('800px'))
{
$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").animate({'width':'100px'});
}else

if($("#testing").animate('width') == ('100px'))
{
$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").animate({'width':'800px'});
	
}
	});
	
	

						   
						   
});


</script>

[Airshow]

what i am trying to do is when i click the div it decreases to width=100px and when i click it again it changes it to original size but i am getting the problem in the second part where i want to re size it to original size i known i got the problem in using

animate()

method in

if

statement.can someone fix this problem for and correct my syntax for

animate()

method in

if

statement.

code is below

else part is not working

<script type="text/javascript">

$(document).ready(function(){

$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").css('width','800px');
	$("#testing").click(function(){
								 if($("#testing").css('width') == ('800px'))
{
$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").animate({'width':'100px'});
}else

if($("#testing").animate('width') == ('100px'))
{
$("#testing").css('border','1px solid #f00');
$("#testing").css('height','100px');
$("#testing").animate({'width':'800px'});
	
}
	});
	
});
</script>

Before thinking about the solution, we have to tidy up your code to make it readable and efficient. The following is equivalent but not unfixed.

$(document).ready(function(){
  $("#testing").css({
    border: '1px solid #f00',
    height: '100px',
    width: '800px'
  }).click(function(){
    var $this = $(this);
    if($this.css('width') == '800px'){
      $this.css({
        border: '1px solid #f00',
        height: '100px'
      }).animate('width','100px');
    }
    else {
      if($this.animate('width') == '100px'){
        $this.css({
          border: '1px solid #f00',
          height: '100px'
        });
        $this.animate('width','800px');
      }
    }
  });
});

Note that multiple jQuery objects can be avoided.

Now to make the code work:

#testing {
  border: 1px solid #f00;
  height: 100px;
  width: 800px;
}

$(document).ready(function(){
  var widths = {w1:800, w2:200};
  $("#testing").click(function(){
    var $this = $(this).stop(true,true);//stop current animation, kill the animation queue and go to the end of current animation.
    var w = (parseInt($this.css('width')) === widths.w1) ? widths.w2 : widths.w1;//decide on new width
    $this.animate({width: w+'px'}, 500);//animate to new width over half a second.
  });
});

(untested)

Airshow