[jQuery] prevent object from being clicked until animation is over

As in topic. I have dynamic gallery containing just 3 elements:

http://szycha.kylos.pl/test/gal.html
http://szycha.kylos.pl/test/js/gallery.js -script

Problem occures when image is clicked another time(you have to click
quick to see the problem) before end of animation. I think that
preventing it from being clicked would solve the problem but im not
sure.

Please help me find the solution

Code:
$(function() {

$('#gallery img').click(function() {

var zIn=$(this).css('zIndex');

if(zIn==3){
$(this).animate({"width":"365px","height":"265px"},
300,function(){
$
(this).animate({"width":"363px","height":"262px"},500);}
);

}else{

$(this).animate({ "left" : "0px",
"opacity" : ".05" }, 300,function() {

$(this).animate({
"top" :
"0px",

"opacity" : "1",

"width":"363px","height":"262px"
},300, function(){
$(this).css
('zIndex', '3');

$('#gallery
img').not(this).each(function(j){

j++;
var
box_zIn=$(this).css('zIndex');

if
( box_zIn==3 && zIn==2 ){ //click box 2
$
(this).animate({ "left":"40px",

"height":"250px",

"width":"346px"

},
300).css('zIndex', '2');
}
if
(box_zIn==3 && zIn==1){ //click box 1
$
(this).animate({ "left":"40px",

"height":"250px",

"width":"346px"

},
300).css('zIndex', '2');
}
if
(box_zIn==2 && zIn==1){ //click box 1
$
(this).animate({ "left":"75px",

"height":"240px",

"width":"333px"

},
300).css('zIndex', '1');
}
});
});
}
);
}
//return false;
});
});