24

HTMLのさまざまな部分にさまざまなアニメーションを実行する複数の関数があります。これらの関数をチェーンまたはキューに入れて、アニメーションを同時にではなく順番に実行したいと思います。

ユーザーがさまざまなボタンやリンクをクリックしているように見えるように、複数のイベントを順番に自動化しようとしています。

おそらくコールバック関数を使用してこれを行うことができますが、その後、さまざまな関数からすべてのアニメーションをプルして、正しいパターンで再グループ化する必要があります。

jqueryの「キュー」は役に立ちますか？キューのドキュメントを理解できませんでした。

例、JQuery：

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML：

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

ありがとう。

編集：私はタイマーでそれを試しましたが、それを行うためのより良い方法があると思いました。

編集＃2：

具体的に説明します。ページのさまざまな要素でクリック＆ホバーイベントにバインドされた複数の関数があります。通常、これらの関数は互いに関係がありません（互いに参照しません）。既存の関数のコードを変更せずに、これらのイベントを通過するユーザーをシミュレートしたいと思います。

4

15 に答える 15

38

jQuery Queueコードは、十分に文書化されていませんが、基本的な考え方は次のとおりです。

$("#some_element").queue("namedQueue", function() {
  console.log("First");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Second");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Third");
});

$("#some_element").dequeue("namedQueue");

このコードを実行すると、コンソールに「First」が表示され、1秒間休止し、コンソールに「Second」が表示され、さらに1秒間休止し、最後にコンソールに「Third」が表示されます。

基本的な考え方は、要素にバインドされた名前付きキューをいくつでも持つことができるということです。を呼び出して、キューから要素を削除しますdequeue。これは自分で何度でも手動で行うことができますが、キューを自動的に実行する場合は、キューにdequeue入れられた関数内で呼び出すだけです。

jQueryのアニメーションはすべて、と呼ばれるキュー内で実行されますfx。要素をアニメーション化すると、キューに新しいアニメーションが自動的に追加され、現在実行中のアニメーションがない場合はデキューが呼び出されます。必要に応じて、独自のコールバックをfxキューに挿入できます。dequeue（他のキューの使用と同様に）最後に手動で呼び出す必要があります。

于 2009-07-08T01:26:30.183 に答える
3

関数の配列を作成し、キューに入れたいすべての関数を追加します。

次に、配列をループし、jQueryを介して各関数をイベントに呼び出す関数呼び出しを追加します。

おそらく、これを内部的にも処理できるjQuery用の非常に単純なプラグインを作成できます。

于 2009-07-07T23:36:27.977 に答える
2

保持OneしTwo、別々の関数として使用したい場合は、次のようにすることができます。

function One(callback) {
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
        function(e) { callback(); });
}
function Two() {
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One(Two);
于 2009-07-07T23:08:50.887 に答える
2

2番目をコールバック関数として実行します。

$('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
    two();
});

これは、最初のアニメーションが終了したときにtwo（）を実行します。そのような場合に時間指定キューにさらにアニメーションがある場合は、setTimeout（）の代わりにjqueryタイマープラグインを使用します。これは、場合によっては非常に便利です。

于 2009-07-07T23:10:09.467 に答える
2

私のWebプロジェクトの1つでは、発生したイベントに応じてさまざまなアクションのシーケンスを実行する必要がありました。私はコールバック（Visitorパターンのようなもの）を使用してこれを行いました。関数またはアクションのグループをラップするオブジェクトを作成しました。次に、それらのラッパーをキューに入れます。配列は正常に機能します。イベントが発生すると、配列を反復処理して、コールバックを受け取ったオブジェクトの特殊なメソッドを呼び出します。そのコールバックが私の反復を継続するきっかけになりました。

関数をラップするには、apply関数の知識が必要です。apply関数は、スコープのオブジェクトと引数の配列を取ります。そうすれば、ラップしている関数について何も知る必要がありません。

于 2009-07-07T23:37:16.587 に答える
2

何かのようなものはどうですか？

var f1 = function() {return $(SELECTOR1).animate({ 'prop': 'value' }, 1000)};
var f2 = function() {return $(SELECTOR2).animate({ 'prop': 'value' }, 1000)};
var f3 = function() {return $(SELECTOR3).animate({ 'prop': 'value' }, 1000)};

$.when(f1).then(f2).then(f3);
于 2014-07-20T03:56:00.597 に答える
1

より安全で100％機能する方法は、変数とifブランチを使用することです。以下の例では、1秒かかる4つのジョブを実行します。ジョブの後に、関数f2を実行します。

<html><body>
<div id="a" class="a" />
 <script type="text/javascript">
var jobs = 0;
function f1() {
job(); 
job();
job();
job();    
};

function f2() {
    if(jobs >3)
        l("f2");
};

<!------------------------- ->
function job() {
    setTimeout(function() {
        l("j");
        jobs+=1;
        f2();
    }, 1000);
}
function l(a) {
    document.getElementById('a').innerHTML+=a+"<br />";
};
f1();


</script></body></html>
于 2011-05-23T06:57:20.093 に答える
1

本当に簡単な修正。

function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000, Two);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
//We no longer need to call Two, as it will be called when 1 is completed.
    //Two();
于 2012-01-11T16:09:52.393 に答える
0

アニメーション間隔が2000ミリ秒ですでに定義されている限り、2000ミリ秒の遅延で2番目の呼び出しを行うことができます。

One();
SetTimeout(function(){
  Two();
}, 2000);
于 2009-07-07T23:06:23.887 に答える
0

以下は機能し、コールバックがnullの場合でもエラーにはなりません。

function One(callback)
{
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
       function()
       {
            if(callback != null)
            {
                 callback();
            }
       }
    );
}
function Two()
{
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

var callback = function(){ Two(); };
One(callback);
于 2009-11-27T19:36:14.323 に答える
0

@TrippRitterは、コールバックに.callを添付する必要があります

One = function(callback){
    $('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
        if(typeof callback == 'function'){
            callback.call(this);
        }
    });
}

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

One(function(){ 
    Two();
});

しかし、それは次のことをするのと同じです

$('div#animateTest1')
    .animate({ left: '+=200' }, 2000, 
    function(){
       Two();
    });

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}
于 2009-11-30T22:51:19.367 に答える
0 
$('div#animateTest1').animate({left: '+=200'},2000, 
function(){
   $('div#animateTest2').animate({ width: '+=200' }, 2000);
}
);
于 2012-01-30T14:37:43.050 に答える
0

コピーアンドペースト............2013年7月9日

<!doctype html>
<html lang="en">
    enter code here<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>

</body>
</html>
于 2013-09-06T22:39:31.727 に答える
0

イェフダカッツの答えは技術的には正しいですが、より大きくより複雑なアニメーションでは非常に速く膨れ上がります。

私はあなたのような状況のために、キューイング機能を可能にするプラグインを作成しました（必要に応じて一時停止と再開を使用）。

デモ：https ：//jessengatai.github.io/okaynowthis.js/

okaynowthis.jsを使用した問題の解決策は、次のようになります。

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});
于 2016-10-14T05:21:10.330 に答える
-1

関数を作成する代わりに、簡単な方法があります。

$('#main').animate({ "top": "0px"}, 3000, function()
   {    $('#navigation').animate({ "left": "100px"},  3000, function() 
        {
            alert("Call after first and second animation is completed.");
        })
    }
);

したがって、Jqueryはデフォルトで、関数を1つずつ実行するキューを提供します。

于 2010-11-26T07:08:18.147 に答える