i'm trying to make images on my site a bigger size if you click on them.
i want to undo the enlarged view if you click on the picture again.

$("img").click(function(){

    var grown = 'false';

    if (grown == 'true') {
        $(this).animate({width: 300, height: 200}, 1000 );
        var grown = 'false';
        console.log(grown);
    }

    else if (grown == 'false') {
        $(this).animate({width: 600, height: 400}, 1000 );
        var grown = 'true';
        console.log(grown);
    }

});

enlarging works, but the grown variable seems to always be stuck on true, so it won't ever shrink back. is my logic flawed? any help greatly appreciated!

i'm trying to make images on my site a bigger size if you click on them.
i want to undo the enlarged view if you click on the picture again.

$("img").click(function(){

    var grown = 'false';

    if (grown == 'true') {
        $(this).animate({width: 300, height: 200}, 1000 );
        var grown = 'false';
        console.log(grown);
    }

    else if (grown == 'false') {
        $(this).animate({width: 600, height: 400}, 1000 );
        var grown = 'true';
        console.log(grown);
    }

});

enlarging works, but the grown variable seems to always be stuck on true, so it won't ever shrink back. is my logic flawed? any help greatly appreciated!

• javascript
• jquery

• 1 Why are you using 'true' instead of just true etc – Matti Virkkunen Commented Mar 14, 2011 at 16:52
• 1 A few people seem to be missing the point of your request. Moving the 'var grown = false' declaration outside the click function won't work for all images on the page - resizing one will set 'grown' to true, then clicking another, non-resized one will see that 'grown' is true and do nothing. See Šime Vidas's answer below for a solution that respects multiple images. – Town Commented Mar 14, 2011 at 16:59

6 Answers 6

Why your code doesn't work:

At the beginning of the click handler, your declare the grown variable and assign its value to 'false'. Therefore, the else branch of the if statement will be executed. This will happen every time the user clicks on an image. The if branch will never be executed.

This does the trick:

$('img').click(function() {
    var props = $(this).hasClass('large') ?
                {width: 300, height: 200} : 
                {width: 600, height: 400};    

    $(this).animate(props, 1000).toggleClass('large');
});

Live demo: http://jsfiddle/simevidas/waCQQ/1/

Move the initial var grown= 'false' outside the if/else statement and remove the "var" key word from inside the if/else statement

You need to use a variable which has a scope that is larger than the event handler so that it retains it's value, but you also need a separate variable for each image. Use each to loop through the images, so that you can declare a variable that gets a separate scope for each image.

Only use var where you declare the variable, if you use it where you change it you will declare another local variable instead and only change that.

Javascript has a boolean type, so you should use values true and false instead of strings "true" and "false", that makes for nicer code.

$("img").each(function(){

  var grown = false;

  $(this).click(function() {
    if (grown) {
      $(this).animate({width: 300, height: 200}, 1000 );
    } else {
      $(this).animate({width: 600, height: 400}, 1000 );
    }
    grown = !grown;
  });

});

Try declaring the var grown variable outside the $("img").click(function()

You redeclare your variable each time.

The var keyword is used to declare a variable in the current scope. So you're declaring a new variable in each of your if statement which mask the one from the scope below.

Try remove the var keyword in your both if statement, it should work.

The grown variable is local to the function invocation. You'll have to take it outside, into the enclosing scope for it to retain its value between calls.

BTW using the var keyword inside the conditional blocks is redundant and slightly misleading!