jquery - 在两个 jQuery 动画中间执行代码？

Question

我有以下代码可以切换一些全屏背景图像(淡出、淡入)。

setInterval(function() { 
        var id = parseInt($('img.active').attr('id').substring(3,4));
        var id_next = id;
        switch(id) {
            case 0:
                id_next = 1;
                break;
            case 1:
                id_next = 2;
                break;
            case 2:
                id_next = 0;
                break;
        }
        $('img.active').fadeOut('slow', function() {
            $('img#bg_' + id).removeClass('active');
            $('div.start-headline h1').html(hl[id]);
            $('div.start-headline h2').html(sl[id]);
        });
        $('img#bg_' + id_next).fadeIn('slow', function() {
                $('img#bg_' + id_next).addClass('active');
                $('div.start-switches div').removeClass('active');
                $('div.start-switches div#' + id).addClass('active');
            });
    }, 6000);

我如何告诉这段代码，它应该执行这两行

$('div.start-headline h1').html(hl[id]);
$('div.start-headline h2').html(sl[id]);

在两个淡入淡出的中间？现在它在图像褪色后执行...

提前致谢!

Answer 1

我认为您正在寻找的是对其进行排队，因此它会运行 fadeOut -> 新排队 -> fadeIn

$('img.active').fadeOut('slow', function() {
    $('img#bg_' + id).removeClass('active');
});
$('img.active').queue(function() {
    $('div.start-headline h1').html(hl[id]);
    $('div.start-headline h2').html(sl[id]);
    $(this).dequeue();
});
$('img#bg_' + id_next).fadeIn('slow', function() {
    $('img#bg_' + id_next).addClass('active');
    $('div.start-switches div').removeClass('active');
    $('div.start-switches div#' + id).addClass('active');
});