jqueryのアニメーションと不透明度について

Question

ここに私のdivは&と私のdivを隠して私のdivを表示しています&縮小効果。私はそれがサイズがゼロになる前に、divが縮小されるdivはフェードアウトされることを望む。 私のコードによると、divのサイズが0の場合、divはフェードアウトです。つまり、高さが&の場合はゼロです。

私のコードを見て、サイズがゼロになる前に私のdivをどのように消すことができますか教えてください。 私のdivサイズが300pxだとします。 &の幅がアニメーション機能の助けを借りて150pxに減少すると、私のdivは完全にフェードアウトされます。私のコードで何を変更するか教えてください。

次に、「ここをクリック」ボタンを繰り返しクリックすると、ちらつきが発生し、divが1秒間または1秒未満滞留したことがわかりました。それがなぜ起こるのか？どのように効果を向上させる。 コード内の変更点ここで私は自分のコードを与えています。それをテストし、可能であればもっとスムーズにしてください。

<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

最初の問題、コールバック関数を使用します。

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

しかし、これはjQueryのの.hide()関数に等しいので、多分あなたはそれを使用することができます。トグルするために、この機能は.toggle()

---

第二の問題は、アニメーション機能の前に.stop()を追加することによって解決することができます使用します。

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