jQuery：互いの後でイベントを実行させよう（キュー）

Question

イベントを一度に実行しないようにするために、正しい順序で実行する必要があるため、その前にイベントを実行する必要があります。私はあなたがそれのためにjQueryキューを使用することができますが、私はそれを働かせるように見えることがわかりました。

この例は、プレースホルダのアイデアに単純な「メッセージを表示」です（お互いが終了するまで待つ必要があります）。

私はサンプルコードで2つのリンクを使用しましたが、それ以上のリンクがあります。ここに、アイデア/コードの小さな例があります。あなたのプラグイン機能で

$('.link-1').click(function(e){ 

     $.plugin.show({ 
      text: 'Quisque porta purus et odio vulputate ornare. Suspendisse dui dui.', 
      time: 1000 
     }); 
    }); 

    $('.link-2').click(function(e){ 

     $.plugin.show({ 
      text: 'Etiam non augue nec felis consectetur sodales a.', 
      time: 4000 
     }); 
    }); 


    // public functions 
    $.plugin= { 
     show: function(str){ 

      var tmp = '<div class="msg-box">'+str.text+'</div>'; 

      $('#msg-div').prepend(tmp); 

      $('.msg-box').fadeIn(str.time, function(){ 
       $(this).delay(str.time).fadeOut(str.time, function(){ 
        $(this).remove(); 
       }): 
      }); 
     } 
    } 

Answer 1

あなたplugin.showにも「

$.plugin= { 
    show: function(str){ 
     var tmp = '<div class="msg-box">'+str.text+'</div>'; 

     $('#msg-div').prepend(tmp); 

     // $(.msg-box').fadeIn(str.time, function(){ 
     $('.msg-box').fadeIn(str.time, function(){ 
      $(this).delay(str.time).fadeOut(str.time, function(){ 
       $(this).remove(); 
      }): 
     }); 
    } 
} 

編集が欠落しているjQueryのキューは、特別に、アニメーションのために設計されていますが、あまりにも多くのコンマ

$.plugin.show({ 
    text: 'Quisque porta purus et odio vulputate ornare. Suspendisse dui dui.', 
    time: 1000//, 
}); 

Answer 2

を持って呼び出します要素スコープオブジェクトです。つまり、グローバルアニメーションキュー providがありません。あなたの要件を満たすためにed。

$.plugin.showメソッドで常に新しい.msg-div要素を作成するため、これらのメッセージdivはすべて同じ要素ではないため、同じアニメーションキューを再利用することはできません。

$.plugin = { 
     show: function(str, callback /* 1. add an callback argument */) { 
      var tmp = '<div class="msg-box">' + str.text + '</div>'; 

      $('body').prepend(tmp); 

      $('.msg-box').fadeIn(
       str.time, 
       function() { 
        $(this).delay(str.time).fadeOut(
         str.time, 
         function() { 
          $(this).remove(); 
          callback(); /* 2. run callback here */ 
         } 
        ); 
       } 
      ); 
     } 
    }; 

    flow.exec(
     function() { 
      $.plugin.show(
       { text: 'abc', time: 4000 }, 
       this /* 3. provide this as callback parameter to $.plugin.show */ 
      ); 
     }, 
     function() { 
      $.plugin.show(
       { text: 'xyz', time: 1000 }, 
       this /* 3. provide this as callback parameter to $.plugin.show */ 
      ); 
     } 
    ); 

あなたは単にあなたの$.plugin.show方法にcallbackパラメータを追加し、flow.execを使用して、すべてのアニメーション機能を実行する必要があります：あなたの条件については

、 Flow-JSは、より良い選択肢であることを含めてこのようなコードを書くことができメソッドであり、 $.plugin.showメソッドを呼び出すときに callbackパラメータとして thisを指定します。