Рабочая демонстрация следующего →
Вот простой плагин 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
, чтобы они были включены в анимацию.
См. Рабочий пример →