这是我要创建的示例...
假设有两个 div,每个都包含一些其他 HTML/内容(其他 div)。我想在页面加载时在 View 中放置其中一个 div,然后在几秒后(比如说 5 秒),将第二个 div 滚动到与第一个 div 相同的位置,然后无限期地重复该过程,直到用户离开页面。
有问题的页面和元素可以在 http://paysonfirstassembly.com/ 找到.我正在尝试使用一类 dynamicPanel 为左侧边栏设置动画。至少会有三个这样的 div,它们的内容长度几乎匹配。
感谢大家的帮助。我是一个非常新的客户端程序员,感谢这个社区对新开发人员的尊重。
最佳答案
Working demo of the following →
这是我刚刚制作的一个简单的 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
,以便它们包含在动画中。
关于javascript - 简单的 jQuery Animate 示例 - 从一个 div 滚动到另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5923677/