Question

here is my code by which i am showing my div & hiding my div with grow & shrink effect. i want that when div is going to shrink then div will be fadeout before it’s size is zero.
according to my code my div is fadeout when div size is 0. i mean when height & width is zero.

so please go through my code and tell me how can i fadeout my div before it size become zero.
suppose my div size is 300px. when height & width decrease to 150px with the help of animate function then i want that my div will be fadeout completely. so tell me what to change in my code.

next i saw if i click repeatedly on “click here” button then some flicker occur and also i saw div stuck for one sec or less than one sec. why it happen. how to improve the effect.
what to change in the code. here i am giving my code. please test it and if possible make it more smoother.

<div class="click">Click here</div>
<div class="grower"></div>
.click {background:#ccc; border:1px solid black; padding:10px; display:inline-block}
.grower {width:0; height:0; background:red; position:absolute; top:150px;   left:150px;opacity: 0}

var grower = $('.grower');
var flag=0;

$('.click').click(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left = windowWidth/2 - 150;
var top = windowHeight/2 - 150;

if(flag==0)
{
 grower.css({left:windowWidth/2, top:windowHeight/2});
 grower.animate({opacity : 1,width:300, height:200, left:left, top:top},'slow');
 flag=1;
}
else if(flag==1)
{
 grower.animate({opacity : 0,width:0, height:0, left:(windowWidth/2 -   $('#grower').width()), top:(windowHeight/2 - $('#grower').height())},'slow');
 flag=0;
}
});

Answer 1

The first problem, use a callback function:

$('#my-id').animate({width: 0, height: 0}, 1000, function() {
   $(this).fadeOut();
});

But this is equal to the .hide() function of jQuery, so maybe you can use that. And in order to toggle this function use .toggle()

---

The second problem can be solved by adding .stop() before the animate function:

$('#my-id').stop().animate({width: 0, height: 0}, 1000);