Почему объекты jQuery выводятся одновременно, а не по очереди

А с чего бы им выводиться по очереди? Цикл не обязан знать, какой код ему передали на выполнение. Он мгновенно выполняет все итерации.

К тому же, в таком виде не будет работать, потому что

$("body").append(""+fr[i]+"") - возвращает body, который и будет скрываться. А не добавленный элемент. Нужно отдельно создавать элемент, отдельно добавить его в body, а показывать потом сам элемент.

Если хочется по очереди, можно или так:

let fr = ["Bob", "ALice", "Tom"];
for ( let i = 0; i < fr.length; i++ ) {
let $el = $( "

" ).hide();
$('body').append($el);
$el.fadeIn( 1000 * (i + 1) );
}

Цикл также выполнится мгновенно, но у первого блока будет fadeIn 1000, у второго 2000, третьего 3000.

Или так:

let fr = ["Bob", "ALice", "Tom"];

let i = 0;
(function loop() {
if( i < fr.length ) {
let $el = $( "" ).hide();
$('body').append($el);
$el.fadeIn( 1000, loop );
i++;
}
})();

.fadeIn( 1000, loop ); — когда выполняется fadeIn, вызывает функцию loop - т. е. саму себя, уже для i++;