Question

问题是当我点击按钮时，div应该移动三次，并且每次移动后都会改变背景和文本，但是当我这样做时 div只分配最后一个.css和.html

$(document).ready(function () {
  $("#button").click(function () {
    $(".square").animate({top: '250px'});
    $(".square").html("My friend");
    $(".square").css({
      backgroundColor: "#aa0000",
      color: "white"
    });
  //SECOND MOVE
  $(".square").animate({left: '250px'});
  $(".square").css({
    backgroundColor: "yellow",
    color: "white"
  });
  $(".square").html("NO");
  //THIRD MOVE
  $(".square").animate({top: '-10px'});
  $(".square").html("YESSSSSSSSSSSSSSS");
  //FOURTH MOVE
  $(".square").animate({left: '-10px'});
  $(".square").css({
    backgroundColor: "Black",
    color: "white"
  });
  $(".square").html("NOO")
});

<!-- Here's the html:  -->

<div id="content" class="wrapper box">
    <button id="button">Go</button>
    <article>
        <div class="square">Hello</div>
        <div class="output"></div>
    </article>
    <input type="text" id="number"/>
    <button onclick="calculate();">Check</button>
    <button onclick="sortArray();">Input array</button></div>

Answer 1

您需要在每个动画结束后触发的动画完成事件中为每个步骤添加一个函数。

请参阅：jQuery .animate() complete function:

尝试这样的事情：

＆＃13;

$(document).ready(function () {
    $("#button").click(function () {

        $(".square").animate({top: '250px'}, 'slow', function() {

            $(".square").html("My friend");
            $(".square").css({
                backgroundColor: "#aa0000",
                color: "white"
            });

            //SECOND MOVE
            $(".square").animate({left: '250px'}, 'slow', function() {
                $(".square").css({
                    backgroundColor: "yellow",
                    color: "white"
                });

                $(".square").html("NO");

                //THIRD MOVE
                $(".square").animate({top: '-10px'}, 'slow', function() {
                	$(".square").html("YESSSSSSSSSSSSSSS");

                    //FOURTH MOVE
                    $(".square").animate({left: '-10px'}, 'slow', function() {
                        $(".square").css({
                            backgroundColor: "Black",
                            color: "white"
                        });
                        $(".square").html("NOO")
                    });

                });
                
            });

        });
    });
});

function calculate() { console.log("calculate");}
function sortArray() { console.log("sortArray");}

＆＃13;

.square {
position:absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="wrapper box">

<button id="button">Go</button>

<article>
    <div class="square">Hello</div>
    <div class="output"></div>
</article>
<input type="text" id="number"/>
<button onclick="calculate();">Check</button>
<button onclick="sortArray();">Input array</button></div>

＆＃13;

修改

要更改duration（速度），只需将速度作为第二个参数添加到这样的animate()函数中，以获得3000毫秒的动画持续时间，或者将较小的值添加到更快的动画中：

$(".square").animate({top: '250px'}, 3000, function() {

jQuery在.animate之后多次更改颜色和文本

1 个答案: