用ajax和CSS3動畫動態加載wordpress內容

Question

沒錯，所以我決定把自己定位爲一種學習曲線形式的挑戰。我從來沒有使用Ajax，但我覺得這是我真正必須學習的東西，所以要做到這一點比在新的投資組合網站上做得更好。

該網站的主要概念涉及在960邊緣摺疊後面的網站內容，因此您需要點擊一個鏈接並將當前內容全部滑入其部分隱藏的摺疊中，摺疊會調整大小以匹配新的內容塊，新內容從摺疊下滑入。我現在只是簡單地使用Wordpress循環和一些基本的jquery來完成這個消息。 （仍然無法設法讓褶皺在新內容進入之前正確調整其高度）

我有這個（http://www.deluxeblogtips.com/2010/05/how-to-ajaxify- wordpress-theme.html）作爲開始的基礎，但它似乎並沒有達到我預期的目標。

保存設置一些無聊的jsfiddle，這裏的網站，因爲它代表http://paradoxdevelopment.org/

編輯：對不起得到分心解釋，忘了問的確切問題：

我怎樣才能讓這個當你點擊內部鏈接，它會導致這一系列事件：

內容框幻燈片OUT->內容的變化 - >摺疊成長 - >內容框幻燈片與新的內容

編輯2：我意識到我沒有REA再次讓自己清醒。我設法讓我的頭部圍繞ajax加載內容，問題在於不同頁面的內容以不同的方式加載。例如：

主頁上有3個最近的網站從頂部的垂直摺疊向下滑動，從左側滑入的新聞帖子以及從右側滑入的新聞帖子列表。

工作/播放頁面在頂部有一個垂直摺疊，塊從其上滑落。

聯繫人是一個簡單的全寬度，所以摺疊在任何一邊填充960.現在的大約頁面相同，雖然這可能有一個側邊欄在未來。

我該如何做到這一點，使AJAX可以檢測到當前加載的內容，因此它知道如何做出反應？

感謝您提前提供任何幫助！

Answer 1

那麼你幾乎已經概述了自己需要做什麼，所以我會提供一個untested提綱，說明如何獲得這樣的工作。

function animateInDone() { 
     // do something here 
} 

function foldReady() { 
     // fold has been scaled for this content let's show it on screen 
     $('#contentBox').animate(
      {'left':'100px'}, 
      400, 
      'swing', 
      complete: animateInDone 
    ); 
} 

function contentLoadDone (responseText, textStatus, XMLHTTPStatus) { 
     // new content loaded and displayed on div since we used .load() 
     if (textStatus == 'success') { 
      // change the fold size 
      $('#fold').animate(
       {height:'350px'}, // or the new height of the contentBox or something else 
       // this can also be {height:'+50px'} 
       400, 
       'swing', 
       foldReady 
      ); 
     } else { 
      // handle errors 
     } 
} 

function animateOutDone() { 
     // load the new content by using .load or .ajax 
     $('#contentBox').load(
      'newcontent.html', 
      complete:contentLoadDone 
    ); 
} 

function contentChange() { 
     // animate the content box out 
     $('#contentBox').animate(
      {'left':window.innerWidth}, 
      400, 
      'swing', 
      complete: animateOutDone 
    ); 
} 

我不知道確切的語法.animate呼叫，但你就可以推測爲這一切可能的選項從相關的文檔

• http://api.jquery.com/load/
• http://api.jquery.com/ajax/

Addit離子編輯2： 你需要將UI的狀態存儲在某個地方。這可以像存儲當前頁面名稱的變量一樣簡單，也可以具有類層次結構，其中每個頁面都有其自己的類，並具有不同的UI輸入/輸出動畫。

var pageHome = function() { 
    this.animIn = function() { 
     // animate home page in 
    } 

    this.animOut = function (newpage) { 
     // animate home page out and set newpage.animIn as the callback for when the animation in done 
    } 
} 

var pageNow = pageHome; 
pageNow.animIn(); 

我個人喜歡有功能對象。