исчезающие элементы внутри div с циклом

Question

У меня есть такой div:

<div id="fade">
<p>  A </p>  
<p>  B </p>  
<p>  C </p>  
<p>  D </p>  
<p>  E </p>  
</div> 

Я хочу, чтобы каждая буква в этом div исчезала, и цикл должен повторяться только один раз.

То есть он должен начинаться с'A' и идти до 'E' и затем остановиться.

Есть ли для этого какая-либо библиотека jQuery?

Редактировать: Спасибо за все ваши ответы.Я думаю, что поставил вопрос неправильно.я хочу, чтобы div (fade) показывал 'A', затем исчезал, а в том же месте 'B' должен появляться и так далее.Это должно повторяться только один раз.

Спасибо.

Answer 1

Вы можете просто расширить jQuery с помощью этой функции:

$.fadeInNext = function(next){
    next.fadeIn(function(){
        $.fadeInNext($(this).next());
    });
}
$.fn.fadeInEach = function(){
    this.eq(0).fadeIn(function(){
        $.fadeInNext($(this).next());
    });
};
$('#fade p').hide().fadeInEach();​

Это должно работать. Пример

---

Обновление:

Для исчезновения новой буквы после исчезновения предыдущей:

$.fadeInNext = function(next) {
    next.fadeIn(function() {
        $(this).fadeOut(function(){
            $.fadeInNext($(this).next());
        });
    });
}
$.fn.fadeInEach = function() {
    this.eq(0).fadeIn(function() {
        $(this).fadeOut(function() {
            $.fadeInNext($(this).next());
        });
    });
};
$('#fade p').hide().fadeInEach();​

Пример

---

Чтобы добавить новую букву, пока предыдущая еще исчезает:

CSS:

#fade {
    position: relative;
}
#fade p {
    position: absolute;
}​

JavaScript:

$.fadeInNext = function(next) {
    next.fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
}
$.fn.fadeInEach = function() {
    this.eq(0).fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
};
$('#fade p').hide().fadeInEach();​

Пример

Answer 2

Сделайте что-то вроде кода ниже,

var delay = 1000;
$(document).ready(function() {
  $('#fade p').fadeOut(0).each(function(i) {
      $(this).delay(i * delay).fadeIn(1000);
    }); 
});

Демо : http://jsbin.com/oqidi3

Answer 3

Проверьте этот плагин:

• http://www.malsup.com/jquery/cycle/int2.html

Одна из демонстраций на этой странице даст вам то, что вы хотите.

С сайта:

Слайд-шоу не ограничиваются изображениями. Вы можете использовать любой элемент по вашему желанию.