How can I make the animations be run one by one?

Sorry for joining the party late.

The existing answers have issues when a timer blocks and rely on the accuracy of timers, moreover they require an actual delay.

jQuery actually provides a generic way to perform animations sequentially with promises:

$(document).ready(function() {    var lis = $("li");    var queue = $.Deferred().resolve(); // create an empty queue    lis.get().forEach(function(li){        queue = queue.then(function(){           return $(li).animate({opacity: 0}, 1000).promise();        })    });});

Fiddle

Note that this will work even if you assign them different animation durations or different animations, the result in queue will contain a hook on when the last animation finished. This also supports aggregations (waiting for all promises to finish in parallel) and more.

Each element has its own animation queue, so as you've seen they all animate at the same time rather than waiting for the previous element to finish. You can add a delay for each element:

$(lis[i]).delay(i*1000).animate({opacity: 0}, 1000);// ------^^^^^^^^^^^^^^

Demo: http://jsfiddle.net/p2kdpxr3/

use delay()

$(lis[i]).delay(i * 500).animate({opacity: 0}, 1000);

DEMO