jQueryキューメッセージ
-
06-07-2019 - |
質問
ウェブサイトにメッセージを表示する短い機能があります。
function showHint() {
$('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}
そして、メッセージを隠す別の関数があります。
function hideHint() {
$('#notify').hide('slide', {direction: 'right'}, 500);
}
問題は、この関数を複数回呼び出すと、すべてのメッセージを同時に表示しようとし、すべてが中断することです。この関数を2回呼び出すと、アニメーションがキューに入れられ、メッセージが次々と表示されます。この関数は、同時に複数回呼び出す必要がありますが、次々に表示されます。モミが隠れたら、次のメッセージが表示されます。
どうすれば問題を解決できますか?いいですね!
解決
これまで私が使用してきた一連のアニメーションを次々とチェーンするミニカスタムプラグインです。
// 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
へのコールバックとして渡すだけです。
所属していません StackOverflow