jquery - jquery .animate不同的速度

Question

我在 Jquery 中使用 .animate 函数。我有一个使用 marginLeft 滑动的 div，但我也需要它淡入，但我需要它比 marginLeft 效果慢。使用 .animate，我似乎只能应用一个速度参数。

<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:false在 options 数组中使用 animate 的两个参数形式（在第一个动画上）：

<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 是为了减少使用的选择器的数量。由于您选择的是相同的对象，因此最好重用现有的对象。