jquery - Push through list using jQuery

Question

I have an each function of li's similar to

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

I'm trying to figure out how to isolate each one, perform the animation, and move to the next item.

Right now it just does them all at once.

Bonus: How do I keep this from discarding my CSS hover?

#list li:hover { opacity:1; }

Answer 1

Try this:

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