如何在不使用setTimeout的情況下延遲這些動畫？

Question

我正在建立一個一頁網站，並且嘗試通過動畫顯示當前內容然后動畫顯示新內容來在各部分之間導航。 我已經通過使用setTimeout（）來使它工作。 在500毫秒的過程中對當前內容進行動畫處理，然后使用setTimeout（）將新內容的動畫延遲在500毫秒后進行。

問題是我發現setTimeout（）不可靠，而寧願有一個回調或僅在刪除了先前內容后才可以使我在新內容中進行動畫處理的東西。

我意識到可以通過使用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/

ps，目前您正在使用的各種動畫，也可以通過純CSS3解決方案來實現。