3

フルスクリーン背景画像 (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);

この 2 行を実行する必要があることを、このコードにどのように伝えることができますか?

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

2つのフェードの真ん中？画像が消えた後に実行されるようになりました...

前もって感謝します！

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 に答える