循环通过div，淡出前一个，同时淡入下一个div

Question

我已经让循环通过效果工作得很好但是我无法弄清楚如果在前一个div消失的情况下淡入下一个div。

相反，我所拥有的是在下一个div淡入之前的空格。

示例：http://jsfiddle.net/Covanant/mhzn4/

摘录：

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(3000)
              .addClass('animated')
              .delay(1000)
              .fadeOut(3000, cycle);

    i = ++i % divs.length;

})();