Question

I come with yet another question on jQuery :
So i have this code :

$(document).ready(function(){
$(this).click(function(){
    $("#block1").animate({width:7em,height:7em});
    $("#block2").animate({width:7em,height:7em});
    $("#block3").animate({width:7em,height:7em});
    $("#block4").animate({width:7em,height:7em});
    $("#block5").animate({width:7em,height:7em,function(){
        $(this).animate({width:20em,height:20em,top:4em,left:8em});
    });
});
});

that is supposed to get some “post-it” shaped boxes to
1: get all the boxes back to their original position and size
2: pop out of their original position to go in the middle of the screen while enlarging when clicked on..
do you have any idea why this doesn’t work? (i don’t want a css hover, but if there is another way to do this via css, i’m ok with it!!)

Answer 1

$(document).ready(function(){
  $(this).click(function(){
    $("#block1").animate({width:"7em",height:"7em"});
    $("#block2").animate({width:"7em",height:"7em"});
    $("#block3").animate({width:"7em",height:"7em"});
    $("#block4").animate({width:"7em",height:"7em"});
    $("#block5").animate({width:"7em",height:"7em"},function(){
       $(this).animate({width:"20em",height:"20em",top:"4em",left:"8em"});
    });
  });
});

1) missing a closing brace in line 7 “$(“#block5″).animate({width:”7em”,height:”7em” ‘}’ ,function(){“

2) also u need to include jquery file

3) to animate u need to give height and width greater than element’s current height and width to see the effect i.e more than 7em as in css u already have given 7em

4) also there is no Id given to elements as I found in your jsFiddle link

All above points mentioned are based on link http://jsfiddle.net/q5RwE/2/ given by you