How to stop doing 1st function after 2nd?

Question

 $("#zoom").css({ "width": "400px", "height": "190px", "background": "grey" }) $("#zoom").click(function(){ $("#zoom").animate({ width: '50px', height: '50px' },1000); }) }); $("#zoom").click(function(){ $("#zoom").animate({ width: '400px', height: '190px' },1000)

I have div id = "zoom". I need to make it smaller when I click on it and make it big(400, 190) again when I click on it second time. When I click on it first time it does its first function normally, but after I click second time it does second function with first function. How can I fix it?

Answer 1

use a variable:

var isBig = true;
$("#zoom").click(function(){
  if (isBig) {
    $("#zoom").animate({
        width : '50px',
        height : '50px'
    },1000); 
    isBig = false;
  } else {
    $("#zoom").animate({
      width : '400px',
      height : '190px'
    },1000)
    isBig = true;
  }
})