5

次のjqueryテキストフライインアニメーションがあります。さらに説明する前のコードは次のとおりです。

<script type="text/javascript">

$(document).ready(function(){

    $('.flying1 .flying-text').css({opacity:0});
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    var int = setInterval(changeText, 3500);    // call changeText function every 5 seconds

function changeText(){  
    var $activeText = $(".flying1 .active-text");     //get current text    
    var $nextText = $activeText.next();  //get next text

    if ($activeText.is('.end')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text4<div>
                                <div class="flying-text">Text5</div>
                                <div class="flying-text end2">Text6</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    if ($activeText.is('.end2')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('<div class="flying-text active-text">Text1<div>
                                <div class="flying-text">Text2</div>
                                <div class="flying-text end">Text3</div>');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1200, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
</script>

HTML

<div class="flying-text active-text">Text1<div>
<div class="flying-text">Text2</div>
<div class="flying-text end">Text3</div>

ご覧のとおり、Text1-3が最初にアニメーション化/フライインし、Text3に到達すると、アニメーションでText4-6に置き換えられ、Text6に再び到達すると、再びText1-3にループバックします...基本的に私がやりたいのは、アニメーションがテキストの終わり、つまりText3（class = "flying-text end"）とText6（class = "flying-text end2"に到達したときに、アニメーションをより長く一時停止/遅延させることです。 Text3とText6を他のすべてのアニメーションよりも長くアニメーション化したいのですが、どうすればよいですか？使用したコード：

$activeText.stop().delay(5000);

動作しません...

ありがとうございました

4

3 に答える 3

3

あなたは自分で物事を複雑にしすぎたと思います。

次のアニメーションをトリガーするには、通常を使用する必要がありsetTimeoutますが、アニメーションの「完了」関数内でこれを実行して、アニメーションタイマーと通常のタイマーを混在させないようにします。

また、同じ理由で回避する必要がありsetIntervalます。特に、jQueryの作成者がに戻った場合は、アニメーションタイマーと同期しなくなりますrequestAnimationFrame。

これが私の解決策です：

var text = [
    ['Text1', 'Text2', 'Text3'],
    ['Text4', 'Text5', 'Text6']
    ];

var n = 0,
    page = 0;
var $f = $('.flying-text');

function changeText() {
    $f.eq(n).text(text[page][n]).css({
        opacity: 0,
        marginLeft: '-50px'
    }).animate({
        opacity: 1,
        marginLeft: "0px"
    }, 1200, function() {
        if (++n === 3) {
            page = 1 - page;
            n = 0;
            setTimeout(function() {
                $f.empty();
                changeText();
            }, 6000);
        } else {
            setTimeout(changeText, 2000);
        }
    });
};

changeText();​

http://jsfiddle.net/alnitak/GE2gN/での作業デモ

これにより、テキストコンテンツがアニメーションロジックから完全に分離されることに注意してください。

于 2012-06-26T13:57:04.183 に答える
1

ここにも同様の質問があります：

JQueryの効果を遅らせる

下の2番目の回答のコメントでは、遅延は停止では機能しないと述べています。

このページがお役に立てば幸いです。

編集 OK私は解決策を見つけました。これを試して、適切かどうか教えてください。

遅延線を次のように置き換えます。

  $(this).animate('pause').delay(5000).animate('resume');
于 2012-06-22T13:26:50.973 に答える
1

アニメーションをキュー.delay()に入れ、共通のキューオブジェクト（デモ）で使用します。

var text = [
        [ 'Text1', 'Text2', 'Text3' ],
        [ 'Text4', 'Text5', 'Text6' ]
    ],
    reset = {
        opacity: 0,
        marginLeft: -50
    },
    flyout = {
        opacity: 1,
        marginLeft: 0
    },
    flyoutDuration = 1200,
    changeTextDelay = 5000,
    q = $({}), // can also be a common element, e.g. $('.flying1')
    pos = 0;

function changeText() {
    $('.flying1 .flying-text').each(function(i) {
        var div = $(this);

        // setup text
        div.css(reset).text(text[pos][i]);

        // queue
        q.queue(function(next) {
            div.animate(flyout, flyoutDuration, next);
        });
    });

    q.delay(changeTextDelay).queue(function(next) {
        pos = (pos + 1) % text.length;
        changeText();
        next();
    });
}

changeText();

</ p>

于 2012-06-28T07:28:28.037 に答える