在两个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]);

在两个淡入淡出之间？现在它在图片淡出后执行...

提前感谢！

- trnc

---

你想在淡出结束并且淡入即将开始时执行吗？ - Sujit Agarwal

当淡出完成并开始淡入时，正好在中间，是的！ - trnc

Answer 1

我认为你想要的是将其排队，这样它就会运行fadeOut -> new queued -> 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');
});

- hitmanDX

Answer 2

如果我理解问题正确的话，我认为你只需要把

放进去就可以了。

 $('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');
        });

在回调函数中，紧接着$('img#bg_' + id).removeClass('active');

如果我没有正确理解问题，请您指明代码何时执行（是在淡入过程中还是之后），这样我或许可以帮助您。

- Andrea V. Abbondanza

Answer 3

大致确定“慢速”淡出动画的持续时间，然后再增加100毫秒，将该时间用于延迟。将延迟代码放在淡出之外。

$('div.start-headline h1').delay(fadeout_time+100).html(hl[id]);

我不确定延迟是否会影响动画，但你可以测试一下看看它是否有效。我认为你还可以设置另一个时间间隔来操作HTML，与你已经拥有的时间间隔相关。

- Huangism