Question

处理动画。

在这里，我希望文本在另一个第一段从左向右移动，fadeOut和第二个循环后依次出现。我曾尝试过，但没有得到正确的解决。这里可能是什么问题。有人可以建议我吗？

$(document).ready(function() {
  $('#load').each(function() {
    $("div.first").slide(300).delay(800).fadeIn(400);
    $("div.second").slide(300).delay(1200).fadeIn(400);
    $("div.third").slide(300).delay(1600).fadeIn(400);
  });
});

#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

Answer 1

$(document).ready(function() {      
    $("div.first").toggle("slide", 300).delay(800).fadeIn(400);
    $("div.second").toggle("slide", 300).delay(1200).fadeIn(400);
    $("div.third").toggle("slide", 300).delay(1600).fadeIn(400);
});

#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

Answer 2

您将要等待动画完成后再启动下一个动画。您可以使用fadeIn的回调参数，也可以使用promises。另外，jQuery没有slide方法，因此我使用了一些CSS和animate来完成这项工作：

$(document).ready(function() {
  var p = $.when();
  $('#load > div').each(function(i, div) {
    p = p.then(function() {  
      return $(div).animate({left:'0px'}, 300).delay(800).fadeIn(400).promise();
    });
  });
});

body {
  margin: 0;
}
#load {
  width: 700px;
  background-color: #ccc;
  margin: 0 auto;
}
#load > div {
  left: -700px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="load">
  <div class="first">
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
  <div class="second">
    <p>Measure & monitorIt is a long established fact that a reader will be distracted by the readable c projects</p>
  </div>
  <div class="third">
    <p>Intelligence of a page when looking at its layout.</p>
  </div>
</div>

使用jQuery的动画延迟

2 个答案: