Question

我正在尝试仅在第一个动画中途运行或已经完成时才启动第二个动画。

任何帮助将不胜感激

尝试了.is（'：animated'）方法但由于某种原因无效。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ResearchAnimation</title>
  <style>
  div {
    background-color: #bca;
    width: 20px;
    border: 1px solid black;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>


<button id="medicalDevices">&raquo; Expand</button>
<div id="medicalDevicesBlock">M<br />
    e<br />
    d<br />
    i<br />
    c<br />
    a<br />
    l<br />
     <br />
    D<br />
    e<br />
    v<br />
    i<br />
    c<br />
    e<br />
    s<br /></div>

<div id="secondBlock" > H<br />
    E<br />
    L<br />
    L<br />
    O <br />
    </div>



    <!-- /////////////////////////////// Scripts ///////////////////////////////////////////// -->
    <script> 
$( "#medicalDevices" ).click(function() {
  $( "#medicalDevicesBlock" ).animate({
    width: "70%",
    opacity: 60,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

  if ($('#medicalDevices').is(':animated')) {
    // do something
  $( "#secondBlock" ).animate({
    width: "70%",
    opacity: 60,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
}

});
</script>


</body>
</html>

Answer 1

您可以在此处使用callback：

$("#medicalDevices").click(function () {
    $("#medicalDevicesBlock").animate({
        width: "70%",
        opacity: 60,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500, function () {
        $("#secondBlock").animate({
            width: "70%",
            opacity: 60,
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
        }, 1500);
    });
});

.animate() 也支持complete回调功能

.animate( properties [, duration ] [, easing ] [, complete ] )

一旦动画完成就会被触发，所以你可以这样做：

$("#medicalDevices").click(function () {
    $("#medicalDevicesBlock").animate({
        width: "70%",
        opacity: 60,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, {
        duration: 1500,
        complete: function () {
            $("#secondBlock").animate({
                width: "70%",
                opacity: 60,
                marginLeft: "0.6in",
                fontSize: "3em",
                borderWidth: "10px"
            }, 1500);
        }
    });
});

Answer 2

使用Callback并停止（）当前动画并执行下一个动画   使用jquery在元素上调用.stop（）时，   当前正在运行的动画（如果有）立即停止

在jquery中使用stop（）或finish（）方法来停止当前动画

 $("#medicalDevices").click(function () {
    $("#medicalDevicesBlock").stop().animate({
        width: "70%",
        opacity: 60,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500, function () {
        $("#secondBlock").stop().animate({
            width: "70%",
            opacity: 60,
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
        }, 1500);
    });
});

Answer 3

你也可以使用从jQuery 1.8开始也适用于动画的promises：

$( "#medicalDevicesBlock" ).animate({
    width: "70%",
    opacity: 60,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
}, 1500 ).promise().done(function() {
    $("#secondBlock").animate({
        width: "70%",
        opacity: 60,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
});

Jquery参考：https://api.jquery.com/promise/

逻辑上，这可以如下工作。您从使用.promise()动画的第一个项目中获取promise对象，然后在promise对象上注册.done()处理程序。当第一个动画结束时，它将解析promise，从而触发调用.done()处理程序。

如果你想在几个动画都完成的情况下做一些事情，那么对于动画来说，Promise特别有用，这对完成函数来说要难得多，但很容易用promises做。

Jquery - 当另一个结束时开始动画

3 个答案: