jqueryアニメーション関数へのフック

Question

アニメーション機能が高さを低くすると、& divの幅になり、他の関数は並行して実行できます。高さが&になる前にdivを0にする前にdivをフェードアウトさせたいとします。 基本的に私のdivの高さが&の幅が50％減少すると、それをフェードアウトにしたいと思っています。出来ますか？

animateにはコールバックがありますが、アニメーションが完了するとコールバックが呼び出されます。これは嫌いです。ここ は、可能ならば、私のサンプルコードで溶液を教えてください、私のアニメーションコード

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

をサンプリングしています。ありがとう

Answer 1

をアニメーションの各ステップ。この機能では、適切とすぐにその高さが元の値の半分に達すると、要素の不透明度を設定することができます。

$("#my-id").animate({ 
    width: 0, 
    height: 0 
}, { 
    duration: 1000, 
    step: function(now, fx) { 
     if (fx.prop == "height") { 
      var threshold = fx.start/2; 
      if (now < threshold) { 
       $(fx.elem).css("opacity", now/threshold); 
      } 
     } 
    } 
}); 

をこれは、あなたが期待するように動作し、並列に二つの効果を実行する必要があります。渡す際には、結果として生じるフェーディングアニメーションは、エレメントの幅がそれよりも大きい場合、より流動的になることに注意してください。要素の高さよりも広い場合は、heightの代わりにwidthプロパティを監視します。

Answer 2

paramsを50％にアニメートしてからfadeOutにしてアニメーションを続行します（ただし、実際には最後のアニメーションは必要ありません。既に目に見えません）。

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

または最後のアニメーションなし：

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

Answer 3

あなたは2つのアニメーション次々に実行することができます：あなたはanimate()にstep functionを渡すことができ、それがために呼び出されます

$('#my-id').animate({width: 50%, height: 50%}, 1000).fadeOut("slow");