簡單的jQuery動畫實例 - 滾動從一個DIV到另一個DIV

這是我期待創建示例...簡單的jQuery動畫實例 - 滾動從一個DIV到另一個DIV

假設有兩個div，每個都包含一些其它的HTML /內容（其他的div）。我想在頁面加載的視圖中有一個div，然後經過幾秒鐘（比如5），將第二個div滾動到與第一個div相同的位置，然後無限期地重複該過程，直到用戶離開頁面。

有關的頁面和元素可以在http://paysonfirstassembly.com/找到。我正嘗試使用一類dynamicPanel爲左邊欄添加動畫。這些div至少會有三個，它們的內容長度幾乎相等。

我很感謝大家的幫助。我是一位非常新的客戶端程序員，非常感謝這個社區對新開發人員的尊重。

2011-05-07 Penumbra

下面是一個簡單的jQuery插件我只是提出，將滑第一個div，並將其放置在列表的末尾。我的評論下面的代碼進一步解釋，使這可以只是讓你開始，你可以把它調整到您的需求，瞭解jQuery的：

// the plugin declaration 
$.fn.rotateEach = function (opts) { 

    // cache the element set 
    var $this = this, 

     // create some default options 
     defaults = { 
      delay: 5000 
     }, 

     // pass the defaults to settings with any override options 
     settings = $.extend(defaults, opts), 

     // repeated rotation function 
     rotator = function ($elems) { 

      // slide up first element in set 
      $elems.eq(0).slideUp(500, function(){ 

       // detach first element 
       var $eq0 = $elems.eq(0).detach(); 

       // append it to wrapper 
       $elems.parent().append($eq0); 

       // fade it back in 
       $eq0.fadeIn(); 

       // call rotator on reselection of elements 
       // since first element was moved to end 
       setTimeout(function(){ rotator($($elems.selector)); }, 
          settings.delay); 
      }); 
     }; 

    // initial rotator call 
    setTimeout(function(){ rotator($this); }, settings.delay); 
}; 

// invoke plugin 
$('.dynPanelContent').rotateEach();

如果要更改延遲你可以通過它作爲一個選項：

$('.dynPanelContent').rotateEach({ delay: 7500 }); // 7.5 seconds

注：讓他們包含在動畫我也感動中.dynPanelContent.dynPanelOpener和.dynPanelTitle。

See working example →

來源

2011-05-07 20:40:45 mVChr

你是太棒了<3 <3 太謝謝你了！ – Penumbra 2011-05-07 20:50:31

你介意教我如何將自己的參數添加到該插件嗎？我想添加的參數會改變同時顯示多少個元素。例如，在動態面板中將會有十六個元素，但是同時顯示所有十六個元素會造成非常長的頁面。我想要顯示四到六個元素，並讓它們繼續以上述方式滾動，同時只顯示「數組」中的第一個x。 – Penumbra 2011-05-07 21:15:46

也許你可以在嘗試自己實現它之後創建一個新問題......這是週末，我要去外面玩！ – mVChr 2011-05-07 21:30:04

簡單的jQuery動畫實例 - 滾動從一個DIV到另一個DIV

回答

相關問題