Сообщения очереди jQuery
-
06-07-2019 - |
Вопрос
У меня есть короткая функция, которая должна показывать сообщения на веб-сайте. Р>
function showHint() {
$('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}
И есть еще одна функция, которая скрывает сообщения. Р>
function hideHint() {
$('#notify').hide('slide', {direction: 'right'}, 500);
}
Проблема в том, что если я вызываю эту функцию более одного раза, она пытается показать все сообщения одновременно, и все выходит из строя. Я хочу вызвать функцию дважды, а затем она должна поставить анимацию в очередь и показывать одно сообщение за другим. Функция должна вызываться более одного раза одновременно, но показываться один за другим. Следующее сообщение должно быть показано, когда ели прячутся. Р>
Как я мог решить проблему? Было бы хорошо!
Решение
Вот небольшой пользовательский плагин, который я использовал в прошлом, который связывает кучу анимаций одну за другой.
// 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
, передает другую функцию, которую вы должны вызывать, когда у вас заканчивается цикл. В приведенном выше примере мы просто передаем функцию nextChain
в качестве обратного вызова для slideToggle
.
Другие советы
Ваша функция showhint может просто запуститься, скрыв уведомление, и когда это будет сделано, обратный вызов будет тем, что есть существующая функция showhint, которая изменит текст и покажет его. Код не должен быть сложным, учитывая то, что вы уже сделали.