JQuery: 背景画像fadeOut→いろいろ書き換え→fadeInさせたい

お世話になります。
divの背景画像とその中の文字を、一旦フェードアウトさせてから書き換えてフェードインさせたいと考えています。

HTML
1<article id="top-image-wrapper">
2	<div id="top-image"><p class="img-author">写真: ひろ☆つのだ</p></div>
3</article>

javascript
1$(function() {
2	var i = 1;
3	var speed = 1000;
4	var times = 6000;
5	var strBacks = [
6		'http://hogehoge.jp/img/slide01.jpg',
7		'http://hogehoge.jp/img/slide02.jpg',
8		'http://hogehoge.jp/img/slide03.jpg',
9	];
10	var strAuthors = [
11		'写真: むらびと',
12		'写真: しずえ',
13		'写真: たぬきち',
14	];
15	setInterval(function() {
16		if(i > 5) i = 0;
17		$('#top-image').fadeOut(speed);
18		$('#top-image').css("background-image", "url('"+strBacks[i]+"')");
19		$('.img-author').html(strAuthors[i]);
20		$('#top-image').fadeIn(speed);
21		i++;
22	}, times
23	);
24});

と書いたところ、$().fadeOutが始まった直後にcssとhtmlが書き換えられてしまい、「背景画像とHTMLが書き換わってからフェードアウト・フェードインの順番で起こる」ようになってしまいました。
上記4つの処理を、それぞれの処理が終わってから順に実行されるようにするには、どのように書くべきなのでしょうか？　2番目と3番目は、フェードアウト後かつフェードイン前であれば、同時に処理されても構いません。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1$('#top-image').fadeOut(speed, function() {
2        $('#top-image').css("background-image", "url('"+strBacks[i]+"')");
3        $('.img-author').html(strAuthors[i]);
4        $('#top-image').fadeIn(speed);
5} );