jQuery：如何獲得DIV滑動屏幕和滑入另一個？

我已經構建了一個使用CSS @media查詢縮小到適合移動設備的web應用程序。jQuery：如何獲得DIV滑動屏幕和滑入另一個？

我想有一個按鈕來切換顯示DIV的兩個主要內容。

當頁面加載，使用@media查詢，其他人會通過display: none;

當點擊一個按鈕，我想讓它顯示和可見一個隱藏隱藏的，這是我目前已經完成。

但我想動畫這個過程，我想在移動設備上順利工作。

但我不知道如何jquerymobile已經這樣做，這是完美的。

我需要做什麼才能讓面板（div）從左側滑落，而另一個從右側滑入，就像使用非移動jquery的mobilejquery一樣？

例子：http://m.stanford.edu/ 這裏單擊列表項時，滑落在另一個幻燈片

謝謝。

來源

2013-02-17 Phil

如果您同時加載兩個DIV的內容，這相當簡單。然後你可以有一個容器DIV，它具有'overflow：hidden'和'position：relative'屬性。在這個容器裏面，你會有一個「視口」DIV，它將擁有屬性「position：absolute」。您將兩個內容DIV放置在視口區域內，並且只要您想滑動到其他內容，只需在視口DIV上使用jQuery的'animate（）'方法即可。 – kjetilh 2013-02-17 14:52:40

Hi @kjetilh。謝謝你的評論，我很欣賞這個解釋。但我不認爲這會工作，因爲.animate（）不是真正的硬件支持，而面板幻燈片的所有jquery移動動畫由於加速平滑？ – Phil 2013-02-17 15:22:24

我不確定jQuery手機是如何做到的，但另一種可能是CSS3轉換，它應該會產生更好的性能，但它們幾乎不像jQuery效果（跨瀏覽器兼容）那樣受到支持。不確定當你說'加速'時你指的是什麼。 jQuery Mobile使用jQuery動畫沒有意義嗎？：p – kjetilh 2013-02-17 15:32:45

主要功能，可以幫助你做使用HTML5/CSS/JavaScript的硬件加速動畫是-webkit-transform: translate3d CSS規則轉換幻燈片水平（x）的位置向左或向右：

translate3d （x，y，z），translateZ（z）

將元素移到x，y和z中，然後移動z中的元素。正z是朝向觀衆。與x和y不同，z值不能是百分比。

遵循這個出色的tutorial，它向您展示瞭如何在任何使用上述功能的移動設備上使用全屏滑動div來滑動javascript。

有關使用html5進行硬件加速的更多討論，請參見this文章。

來源

2013-02-17 19:22:17 abbood

+1的教程和鏈接.. :) :) – bipen 2013-02-20 12:46:20

嘿謝謝人:) – abbood 2013-02-20 12:51:38

jQuery：如何獲得DIV滑動屏幕和滑入另一個？

回答

相關問題