4

これが私の例です： http://jsfiddle.net/UuD8s/5/

$("#transition")
    .delay(5000)
    .animate({ width: "400px" }, { duration: 1000, queue: true });

$("#transition")
    .delay(2000)
    .animate({ left: "100px" }, { duration: 1000, queue: true });​

ページが 2 秒遅れて起動した後、2 番目のアニメーションの開始を遅らせたい。問題は、最初のアニメーションの後に開始されることです。queueに設定されている場合false、遅延はまったくありません。

ページの起動後、アニメーションを 2 秒遅らせるにはどうすればよいですか?

4

3 に答える 3

7

ページの起動後にアニメーションを遅らせるにqueueは、false に設定しsetTimeout、2 秒を使用します。

$("#transition")
    .delay(5000)
    .animate({width: "400px"}, {duration: 1000, queue: true});

setTimeout(function() {

    $("#transition").delay(2000).animate({ left: "100px" }, {
        duration: 1000,
        queue: false
    });

}, 2000);​

これがライブデモです。

于 2012-05-17T12:30:27.233 に答える
1

setTimeout（）メソッドを使用して、javascript関数を遅らせることができます。

$("#transition").delay(5000).animate({width: "400px"}, {duration: 1000, queue: true});
setTimeout(function() { 
    $("#transition").delay(2000).animate({left: "100px"}, {duration: 1000, queue: false});  
}, 2000);
于 2012-05-17T12:30:56.177 に答える
0

私が理解しているように、2 番目のアニメーション (左のアニメーション) を起動の 2 秒後に開始する必要があります。これには 1 秒かかります。起動後 5 秒で最初の 1 つを開始する必要があります。

だからあなたができることは、左のものが幅を終えてから2秒後にそれらをキューに入れることです...

$("#transition").delay(2000).animate({left: "100px"}, {duration: 1000});
$("#transition").delay(2000).animate({width: "400px"}, {duration: 1000});

http://jsfiddle.net/UuD8s/7/

これは、上記の状況でそれらが同時に実行されていない場合に解決しますが、それらを同時に実行したい場合 (たとえば、移動の途中で幅が縮小し始める必要がある場合)、これは機能しません。

于 2012-05-17T12:38:47.630 に答える