Question

$(".left").animate({left:"-50%"},4000);
$(".center").animate({right:"-50%"},8000);
$(".right").animate({right:"-50%"},4000);

我想简单地延迟启动上面的所有动画，通过在它们周围包含延迟函数，保留相同的动画代码，只需在约1100);之后启动

Answer 1

您需要的只是致电delay()！

尝试$(".left").delay(2000).animate({left: "-50%"}, 4000);插入延迟2秒，例如。

Answer 2

$(document).ready(function() {
  $('div').click(function() {
    setTimeout(function() {
      $(".left").animate({
        left: "0%"
      }, 4000);
      $(".center").animate({
        right: "0%"
      }, 8000);
      $(".right").animate({
        right: "0%"
      }, 4000);
    }, 1100);
  });
})

body {
	position: relative;
}
div {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</body>

围绕jquery动画函数包装启动延迟

2 个答案: