jquery - jquery .animate 異なる速度

Question

Jquery で .animate 関数を使用しています。marginLeft を使用してスライドする div がありますが、フェードインする必要もありますが、marginLeft 効果よりも遅くする必要があります。.animate では、1 つの速度パラメーターしか適用できないようです。

<script type="text/javascript">
 $(document).ready(function(){
 $(".topFrameAnim").css("opacity", "0.0");
  $(".topFrameAnim").animate({
  marginLeft: "0",
    }, 500 );

    $(".topFrameAnim").animate({
  opacity: "1",
    }, 1000 ); // Need this effect to be applied at the same time, at a different speed.




    });


</script>

Answer 1

queue:falseoptions 配列 (最初のアニメーション) で、animate の 2 つの引数形式を使用する必要があります。

<script type="text/javascript">
 $(document).ready(function(){
 $(".topFrameAnim").css("opacity", "0.0")

 .animate({
  marginLeft: "0",
    }, { queue: false, duration: 500 })
  .animate({
  opacity: "1",
    }, 1000 ); // Need this effect to be applied at the same time, at a different speed.

    });


</script>

注: ここでは、使用されるセレクターの数を減らすために .animate を使用しています。同じオブジェクトを選択しているため、既存のオブジェクトを再利用することをお勧めします。