使用jQuery移动正方形[重复]

问题描述 投票:0回答:1

我完全是jQuery的初学者。我想编写用于更改颜色(字体和背景)的正方形的代码,但是它们都不起作用,但是正方形运行得很好。问题出在哪里?

$(function() {
  $("#block").on("click", function() {
    $("#block").animate({
      left: "+=400px",
      color: "white",
      backgroundColor: "red"
    }, "slow").animate({
      top: "+=400px",
      color: "blue",
      backgroundColor: "green"
    }, "slow").animate({
      left: "-=400px",
      color: "green",
      backgroundColor: "blue"
    }, "slow").animate({
      top: "-=400px",
      color: "#fff",
      backgroundColor: "black"
    }, "fast")
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="block" style="height: 100px; width: 100px; color: white; background-color: black; position: absolute;">This square</section>
javascript jquery html css
1个回答
0
投票

除以下所述,所有动画属性均应设置为单个数值。大部分non-numeric cannot的属性都使用基本的jQuery功能进行动画处理(例如,可以对width,height或left进行动画处理,但不能对背景色进行动画处理,除非jQuery.Color] >使用插件)。除非另有说明,否则属性值被视为像素数。可以在适当的地方指定单位em和%。

https://api.jquery.com/animate/

https://github.com/jquery/jquery-color

© www.soinside.com 2019 - 2024. All rights reserved.