如何在不使用setTimeout的情况下延迟这些动画？

Question

我正在构建一个单页网站，我试图通过设置当前内容的动画然后在新内容中制作动画来在各个部分之间导航。我通过使用setTimeout（）来实现这一点。在500ms的过程中设置当前内容的动画，然后使用setTimeout（）在500ms后延迟新内容的动画。

问题是我觉得setTimeout（）不可靠，而且只有当以前的内容被移除时，我才能使用回调或其他东西来让我在新内容中设置动画。< / p>

我意识到这可以通过在animate（）中使用回调函数来完成，但是由于我所有代码嵌套的方式，我发现任何接管我的工作的人都无法读取它。理想情况下，我喜欢顶级回调，而不是嵌套在动画代码深处，因为它更难以理解。

仅供参考我正在使用css3过渡插件，它将默认的'animate（）'函数替换为'transition（）'，以便使用css过渡 - 只是为了避免任何混淆。

这是我到目前为止所做的：

相关HTML

<div id="content">
  <article id="reception">
    <h1 class="title">
      <img src="/images/reception/title.png" alt="Edge" />
    </h1>
    <img src="/images/reception/1.jpg" alt="" class="tile1" />
    <img src="/images/reception/2.jpg" alt="" class="tile2" />
    <img src="/images/reception/hero.jpg" alt="" class="hero" />
    <img src="/images/reception/content1.jpg" alt="" class="content1" />
    <img src="/images/reception/content2.jpg" alt="" class="content2" />
  </article>
  <article id="floorspace">
    <h1 class="title">
      <img src="/images/floorspace/title.png" alt="Space" />
    </h1>
    <img src="/images/floorspace/1.jpg" alt="" class="tile1" />
    <img src="/images/floorspace/2.jpg" alt="" class="tile2" />
    <img src="/images/floorspace/hero.jpg" alt="" class="hero" />
    <img src="/images/floorspace/content1.jpg" alt="" class="content1" />
    <img src="/images/floorspace/content2.jpg" alt="" class="content2" />
  </article>
</div> 

相关脚本：

$(window).bind('hashchange', function (e) {
  if ($(':animated').length) {
    return false;
  }

  var section = $.param.fragment();
  var current = $('#content').children(':visible').attr('id');

  // If this is the first load then load in reception content
  if (section === '') {                    
    if (current === 'reception') {
      animateContentIn("reception");                        
    }
    else {                        
      // Animate out existing content
      animateContentOut(current);

      setTimeout(function () {
        animateContentIn("reception");
      }, 500);
    }
  }
  else {
    // Otherwise find the current page content and animate out
    animateContentOut(current);

    setTimeout(function () {
      animateContentIn(section);
    }, 500);
  }               

  $(window).trigger('hashchange');
});       

function animateContentIn(activePage) { 
  // Now animate in the new content
  switch (activePage) {
    case "floorspace":
      animateFloorspaceElementsIn();
      break;
    case "reception":
      animateReceptionElementsIn();
      break;
  }
}

function animateContentOut(currentPage) {
  // Now animate in the new content
  switch (currentPage) {
    case "floorspace":                    
      animateFloorspaceElementsOut();
      break;
    case "reception":
      animateReceptionElementsOut();
      break;
  }
}

function animateReceptionElementsIn() {
  $('#reception').show();

  $('#reception .title').transition({
    bottom: 520
  }, 200);

  $('#reception .tile1').transition({
    bottom: 504
  }, 300);

  $('#reception .tile2').transition({
    bottom: 504
  }, 350);

  $('#reception .hero').transition({
    bottom: 40
  }, 500);

  $('#reception .content1').transition({
    bottom: 8
  }, 200);

  $('#reception .content2').transition({
    bottom: 8
  }, 250);
}

function animateReceptionElementsOut() {
  $('#reception .title').transition({
    bottom: -56
  }, 200);

  $('#reception .tile1').transition({
    bottom: -136
  }, 300);

  $('#reception .tile2').transition({
    bottom: -152
  }, 350);

  $('#reception .hero').transition({
    bottom: -464
  }, 500, function () {
    $('#reception').hide();
  });

  $('#reception .content1').transition({
    bottom: -112
  }, 200);

  $('#reception .content2').transition({
    bottom: -104
  }, 250);
}

function animateFloorspaceElementsIn() {
  $('#floorspace').show();

  $('#floorspace .title').transition({
    bottom: 520
  }, 200);

  $('#floorspace .tile1').transition({
    bottom: 504
  }, 300);

  $('#floorspace .tile2').transition({
    bottom: 504
  }, 350);

  $('#floorspace .hero').transition({
    bottom: 40
  }, 500);

  $('#floorspace .content1').transition({
    bottom: 8
  }, 200);

  $('#floorspace .content2').transition({
    bottom: 8
  }, 250);
}

function animateFloorspaceElementsOut() {
  $('#floorspace .title').transition({
    bottom: -56
  }, 200);

  $('#floorspace .tile1').transition({
    bottom: -136
  }, 300);

  $('#floorspace .tile2').transition({
    bottom: -152
  }, 350);

  $('#floorspace .hero').transition({
    bottom: -464
  }, 500, function () {
    $('#floorspace').hide();
  });

  $('#floorspace .content1').transition({
    bottom: -132
  }, 200);

  $('#floorspace .content2').transition({
    bottom: -132
  }, 250);
}

Answer 1

您是否尝试过动画库？比如move.js

在最后一个函数中设置回调函数，它在动画结束时运行。

Answer 2

您可以尝试使用jquery延迟方法。 http://api.jquery.com/delay/

Answer 3

我知道这是一个非常古老的问题，但如果有人会遇到同样的问题，请提供更新的解决方案。

使用jQuery animate方法，您可以提供在动画完成时执行的回调：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

同样简单地链接动画将按预期工作，您可以使用queue来访问和管理您创建的链。这里的官方文件揭示了上述内容：

https://api.jquery.com/queue/

P.S。目前，您正在使用的所有类型的动画，也可以通过纯CSS3解决方案实现。