0

div私は2 つの s で区切られたロゴを持っていますspan。現時点では、最初の s でフェードインし、その後 2 番目でフェードアウトしています。現在、3 つのスパンをトリガーする実験を行っており、3 つの要素すべてをフェードインしながら、CSS 属性 margin_left、margin-right、および margin-top を使用して所定の位置に移動することで、3 つのアクションを同時に発生させたいと考えています。次の関数は、最初のスパンのフェードが完了した後に発生するすべてのアクションをトリガーします。アクションを同時に発生させる方法を教えてください。

<script>
$('#logo span').eq(0).fadeIn(10000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(5000);
    $('#logo span').animate({ 'margin-top': '-210' }, 'slow');
});</script>
4

4 に答える 4

1

選択肢は 2 つあります。

最初のオプションは、 with を使用queue: falseしanimateてすべてを一度に実行することです。で呼び出されたアニメーションはqueue: falseすぐに開始されます。

$('#logo span').eq(1).animate({opacity: 1}, {duration: 5000, queue: false}); 
$('#logo span').animate({ 'margin-top': '-210' }, {duration: 'slow', queue: false});

もう 1 つのオプションは、アニメーションが同じ長さの場合、 への 1 回の呼び出しですべてをアニメーション化することanimateです。このように、両方の効果が 1 つのアニメーションと見なされ、一緒に実行されます。

$('#logo span').animate({ 
    'margin-top': '-210',
    opacity: 1
}, 'slow');

編集：

アニメーションが非常に複雑になり始めた場合の別のオプションは、複数の名前付きキューを使用することです。これにより、関連するアニメーションをキューに入れる機能を維持しながら、複数の個別のアニメーションを一度に持つことができます。私が一緒に投げた小さな例はここにあります：

http://jsfiddle.net/5PuPT/

位置の変化と不透明度の変化が独立したキューにどのように作用するかに注目してください。これにより、関連する各アニメーションは、そのタイプの他のアニメーションが完了するまで待機しますが、別のキューのアニメーションは待機しません。

アニメーション化しているのが質問にあるものだけである場合、これは間違いなくやり過ぎです。はるかに複雑なアニメーションのセットがある場合、これは考慮すべきアプローチかもしれません。

于 2012-10-04T17:35:12.027 に答える
0

ここに投稿するすべての人に感謝します。これが私が最終的に思いついたものであり、私のために機能するようになりました。最初のスパンのフェードインの終了に応じて、絶対位置の div で 2 つのスパンをトリガーします。スパンに display:none を設定し、0 の margin-left を定義しているときに、スパンに正または負の margin-left を定義して、スパンを右または左からフライインさせながら同時にフェードインさせることができます。

それを実現させたすべての人にThx。良い１日を！

<script>
$('#logo span').eq(0).fadeIn(10000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(5000);
    $('#logo span').eq(1).animate({ 'margin-left':'0' }, {duration:8000, queue: false});
     $('#logo span').eq(2).fadeIn(5000);
    $('#logo span').eq(2).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
});</script>
于 2012-10-04T19:40:33.773 に答える
0

それらにすべて同じクラス名を付けて、そのクラスを使用して呼び出します。

$('.myClass').fadeIn(5000,....etc

于 2012-10-04T17:35:55.160 に答える
-1

ここで私に与えてくれたすべての助けに改めて感謝します。フォントサイズのアニメーションを挿入して、素敵な仕上げを施しました。これが必要な場合に備えて、最終的な投稿と回答として追加することを考えました! サルドス！

<!-- targeting the first, second and third logo span (image logo) to be faded in right after another, being moved synchroniously, animating font-size and finally displayed in a opocity -->
    <script>
    var oldSize = parseFloat($("#logo span.movie").css('font-size'));     
    var newSize = oldSize  * 3.9;
    $('#logo span').eq(0).fadeIn(1000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(800);
            $('#logo span').eq(1).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
        $('#logo span').eq(2).fadeIn(5000);
            $('#logo span').eq(2).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
                    $('#logo span').eq(0).animate({opacity: 0.7}, {duration: 5000, queue: false});
                    $('#logo span').eq(1).animate({opacity: 0.6}, {duration: 9000, queue: false});
                    $('#logo span').eq(2).animate({opacity: 0.9}, {duration: 5000, queue: false});
                    $("#logo span").eq(2).animate({ fontSize: newSize}, {duration: 5000, queue: false});        

    });</script>
于 2012-10-06T18:19:55.600 に答える