jQueryキューメッセージ

Question

ウェブサイトにメッセージを表示する短い機能があります。

function showHint() { 
    $('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}

そして、メッセージを隠す別の関数があります。

function hideHint() { 
    $('#notify').hide('slide', {direction: 'right'}, 500);
}

問題は、この関数を複数回呼び出すと、すべてのメッセージを同時に表示しようとし、すべてが中断することです。この関数を2回呼び出すと、アニメーションがキューに入れられ、メッセージが次々と表示されます。この関数は、同時に複数回呼び出す必要がありますが、次々に表示されます。モミが隠れたら、次のメッセージが表示されます。

どうすれば問題を解決できますか？いいですね！

Answer 1

これまで私が使用してきた一連のアニメーションを次々とチェーンするミニカスタムプラグインです。

// Good for serializing animations
$.fn.chain = function(fn) {
  var elements = this;
  var i = 0;
  function nextAction() {
    if (elements.eq(i)) fn.apply(elements.eq(i), [nextAction]);
    i++;
  }
  nextAction();
};

次のように呼び出すことができます（ 使用例はこちら ）：

$(document).ready(function() {
  $('li').chain(function(nextChain) { this.slideToggle("fast", nextChain); });
});

chain に渡す関数は、1サイクルでダウンしているときに呼び出す必要がある別の関数を渡します。上記の例では、 nextChain 関数を slideToggle へのコールバックとして渡すだけです。

Answer 2

showhint関数は通知を非表示にすることで開始できます。それが完了すると、コールバックが既存のshowhint関数になり、テキストが変更されて表示されます。すでにやったことを考えれば、コードは難しくないはずです。

Answer 3

通知プラグインだけを使用できませんか？ここに2つ（ 1つ、 two ）は非常に洗練されています。