3

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

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

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

提前致谢！

4

3 回答 3

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');
});
于 2012-06-15T14:10:40.123 回答
0

如果我理解了这个问题，我想你只需要把

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

如果我不能很好地理解这个问题，请您指定代码何时执行（如果在淡入淡出时或之后），也许我可以帮助您。

于 2012-06-15T14:06:55.703 回答
0

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

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

我不知道延迟是否会影响动画，但您可以对其进行测试，看看它是否有效。我认为您还可以设置另一个与您已经必须操作 html 的时间间隔相关的时间间隔

于 2012-06-15T14:09:47.087 回答