css - Jquery animate enlarge/shrink a div on click (2 clicks) -

i trying make code stop after first half, when click again shrinks. so, 2 clicks.

how achieve this?

$('#container').click(function () {     $(this).animate({         'width': '400px',         'height': '400px',         'left': '90px',         'top': '90px'     }, 200);     $(this).animate({         'width': '200px',         'height': '200px',         'left': '90px',         'top': '90px'     }, 200); }); 

js fiddle

i have looked through questions related on stack overflow , none of them allowed click on item resized.

if want toggle effect, there couple different ways achieve this.

the first way keep track of "state" of image in application.

var enlarged = false;  $('#container').click(function () {     $(this).stop(true, false).animate({         width: enlarged ? 200 : 400,         height: enlarged ? 200 : 400,         left: 90,         top: 90     }, 200);      enlarged = !enlarged; }); 

http://jsfiddle.net/mmk2c4vn/4/

the second way write data cache , keep track of image state way.

$('#container').click(function () {     var _this = $(this),         enlarged = _this.data('enlarged') || 0;     _this.stop(true, false).animate({         width: enlarged ? 200 : 400,         height: enlarged ? 200 : 400,         left: 90,         top: 90     }, 200);      _this.data({ enlarged: !enlarged }); }); 

http://jsfiddle.net/mmk2c4vn/6/

of course these 2 of many ways this.