jquery - 如何做 $ ("#side1").css ("transform","translateX(-100px) scale(1)") 使用 jquery animate？

Question

if(flag==0)
{
    $("#side1").css("z-index","999");
    $("#side2").css("z-index","9");
    $("#side3").css("z-index","9");
    $("#side1").css("transform","translateX(0px) scale(1.5)");
    $("#side2").css("transform","translateX(-100px) scale(1)");
    $("#side3").css("transform","translateX(100px)");
    flag=1;
}

我需要使用 jquery animate 而不是 css 来执行此操作，是否可以不使用任何插件来执行此操作？

Answer 1

首先，您需要设置元素“#side1”的初始样式，animate() 方法会将您的初始样式转换为更新的样式。

$("#side1").animate({
    transform: "translateX(0px) scale(1.5)",
  }, 5000, function() {
    // Things to do when animation is complete.
});

本例中的 5000 是以毫秒为单位的动画持续时间。