Question

我有以下代码可以切换一些全屏背景图像（fadeOut，fadeIn）。

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 - ＆gt;新排队 - ＆gt;淡入

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

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');

之后的回调

如果我不太清楚这个问题，请指出代码何时执行（如果在fadein或之后），那么我可以帮助你。

Answer 3

大致计算“慢”动画用于淡出的时间长度，并添加100毫秒，在延迟中使用该时间。将延迟代码放在淡出之外

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

我不知道如果延迟会影响动画，但你可以测试一下它是否有效。我想你也可以设置另一个时间间隔与你已经拥有的操纵html的关系

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

3 个答案: