Простой подход:
function ticker(el, duration) {
if (!el) {
return false;
}
else {
el = typeof el === 'object' ? el : $(el);
duration = duration || 500;
$(el).find('li').first().slideUp(duration, function() {
$(this)
.insertAfter($(this).nextAll('li').last())
.fadeIn(duration, function(){
ticker(el, duration);
});
});
}
}
Вы можете вызвать это с помощью объекта jQuery:
ticker($('#ticker'));
демонстрация JS Fiddle.
Или используя простой узел DOM с указанной продолжительностью (в миллисекундах):
ticker(document.getElementById('ticker'), 300);
демонстрация JS Fiddle.
В ответ на комментарий, оставленный ОП (в комментариях ниже):
Это решение скользит вверх по первому элементу и исчезает в последнем. но я хочу, чтобы исчезло + слайд как для первого, так и для следующего элемента. список оформлен таким образом, что за раз отображается только один элемент.
Я предлагаю это, используя animate() для анимации высоты/непрозрачности элементов списка:
function ticker(el, duration) {
if (!el) {
return false;
}
else {
el = typeof el === 'object' ? el : $(el);
duration = duration || 500;
var first = el.find('li').first(),
last = first.nextAll().last(),
h = last.height();
first.animate({
height: 0,
opacity: 0
}, duration, function() {
$(this).insertAfter(last).animate({
height: h,
opacity: 1
}, duration, function() {
ticker(el, duration);
});
});
}
}
демонстрация JS Fiddle.
Отредактировано после пояснений ОП на следующее:
function ticker(el, duration) {
if (!el) {
return false;
}
else {
el = typeof el === 'object' ? el : $(el);
duration = duration || 500;
var lis = el.find('li').css('display', 'none');
lis.first().fadeIn(duration, function(){
$(this).slideUp(duration, function(){
$(this).insertAfter(lis.last());
ticker(el, duration);
});
});
}
}
демонстрация JS Fiddle.
Использованная литература:
person
David says reinstate Monica
schedule
01.01.2013
