简单的 jQuery Animate 示例 - 从一个 div 滚动到另一个 div

Question

这是我要创建的示例...

假设有两个 div，每个 div 都包含一些其他 HTML/内容（其他 div）。我希望在页面加载时在视图中显示其中一个 div，然后在几秒后（假设是 5 秒），将第二个 div 滚动到与第一个 div 相同的位置，然后无限期地重复该过程，直到用户离开页面。

相关页面和元素可以在 http://paysonfirst assembly.com/ 中找到。我正在尝试使用一类dynamicPanel 为左侧边栏设置动画。至少有三个这样的 div，它们的内容长度几乎匹配。

我感谢大家的帮助。我是一名非常新的客户端程序员，并且很欣赏这个社区对新开发人员的尊重。

Answer 1

以下内容的工作演示 →

这是我刚刚制作的一个简单的 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

注意：我还将 .dynPanelOpener 和 .dynPanelTitle 移至 .dynPanelContent 中，以便将它们包含在动画中。

查看工作示例→