Question

开始按钮和完成按钮不起作用，因为我已经给他们两个id。我想开始动画，当我点击完成它应该完成动画

<script src="jquery-2.2.1.min.js"></script>
<script>

$(document).ready(function()
{
    $("#start_Animate").click(function()
    {
        $("div").animate(2000);
    });
    $("#finish_Animate").click(function()
    {
        $("div").finish();
    });
});

</script>
</head>

<body>
<button id="start_Animate">Start Animate</button>
<button id="finish_Animate">Stop Animate</button>
<div style="background-color:#900; width:400px; display:none; height:300px"></div>
</body>
</html>

Answer 1

当您调用动画时，您应该告诉它还要做什么，在这种情况下，您可以使用简单的show(2000)来显示元素

$(document).ready(function() {
  $("#start_Animate").click(function() {
    //$("div").show(2000)
    $("div").animate({
      width: ["toggle", "swing"],
      height: ["toggle", "swing"]
    }, 2000, "linear");
  });
  $("#finish_Animate").click(function() {
    $("div").finish();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start_Animate">Start Animate</button>
<button id="finish_Animate">Stop Animate</button>
<div style="background-color:#900; width:400px; display:none; height:300px"></div>

使用jQuery动画和完成Animate

1 个答案: