Пролистать список с помощью jQuery

Question

У меня есть каждая функция li похожа на

theList = $('#list li')
total = theList.length;   
  theList.each(function(i){      
   //stuff
    theItems = [];
    theItems.push($(this).animate({opacity:'1'},1111).delay(100).animate({opacity:'.8'}));
})

Я пытаюсь понять, как изолировать каждого из них, выполнить анимацию и перейти к следующему элементу.

Прямо сейчас это делает их всех сразу.

Бонус: Как я могу избежать этого от отказа от моего CSS наведения?

#list li:hover { opacity:1; }

Answer 1

Попробуй это:

var $theList = $('#list li');
$theList.each(function (index) {
    $(this).animate({
        opacity: '1'
    }, 1111).delay(100 * index).animate({
        opacity: '.8'
    });
});