如何得到 <div> 用JQuery顯示和滾動點擊以水平滾動編碼？

Question

我正在嘗試創建一個頁面，通過導航箭頭將div滑入和滑出。 這里可以看到一個非工作的演示：drawmeahouse.com（右邊的div會滑到中間，中間會滑到右邊的鏡像，等等，當它們被添加時會有更多的div最終...）

這是我到目前為止已經走了多遠，到目前為止失敗了，drawmeahouse.com / index2.html

如您所見，內容未顯示在中間，導航箭頭根本沒有移動任何內容！ 我對JQuery很新，所以我試圖破解這個，但我需要一些幫助。

Answer 1

需要在點擊時設置div的動畫...類似於：

$('.next').click(
     function(){
          $('.shadow').animate({ left: '-=600px' })
     }
)

將所有帶有類shadow div移動到左側，有效地將div帶到主視圖中。 id使用不同的類，如content或其他類，因為我確定你會在其他元素上重用shadow類。

div必須是絕對的動畫左邊的屬性。

或者你可以將它們全部放入一個容器中，容器絕對定位並移動整個容器而不是div

Answer 2

$(function(){
   $('#nextControl').click(function() {
      $('#mask').animate({
        marginLeft: "-=200px"
      }, "fast");
   });
    $('#prevControl').click(function() {
      $('#mask').animate({
        marginLeft: "+=200px"
      }, "fast");
   });
});

代碼需要on render ready或on document ready ，這在糾正一些其他語法錯誤后在此處完成。 如果您想查看內容，請刪除visibility: hidden; 來自容器的CSS。