简单的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

回答

相关问题