2015-01-23 2 views
0

У меня есть jquery ajax, который, когда он возвращается и в зависимости от результата операции, исчезает и исчезает на странице различные сообщения DIV. Например:jackery fade-ins, fade-outs накапливаются

$("#RefConflictSelf").fadeIn(1000).fadeOut(6000); 

Мне нравится этот эффект, и я хочу его сохранить.

Это нормально работает, когда пользователи ждут не менее 7 секунд, прежде чем нажать другую кнопку, чтобы запустить другую операцию ajax. Но если они переходят по кнопкам «один за другим» (законное действие - фактически), то разворачивание div и вставку начинают накапливаться, так что вы видите, что эти divs исчезают и исчезают для нескольких предыдущих операций, о которых пользователи больше не заботятся.

Реферат: К тому времени, как пользователь нажимает кнопку 2, они больше не заботятся о fadein/fadeout div от 1-го/предыдущего нажатия кнопки.

Вопрос: Есть ли способ НЕМЕДЛЕННО скрыть какие-либо «затухающие или исчезающие» divs, но все же правильно затухать в сообщении для последнего нажатия кнопки?

Я уже попытался это: всякий раз, когда кнопка нажата, я сразу же скрыть все дивы сообщение, например:

$("#RefConflictSelf").hide(); 

Этот вид работ, но это неуклюжие, потому что, если нажать 5 кнопок 1 за другой, новые сообщения div остаются невидимыми до тех пор, пока оригинал не исчезнет. Таким образом, «.hide()», похоже, топает на более поздних «затухающих» операциях, пока не истечет время исчезновения оригинала (или последнего нетопающего), и все это сделано.

Как сделать jquery спрятать все предыдущие сообщения об исчезновении div, но затем разрешить последнее сообщение div, а затем выйти, как обычно? (Если, конечно, еще одна кнопка не то нажал, и в этом случае старый один должен быть топал, а новый будет разрешено работать.)

ответ

3

Причина, почему ваша анимация нагромождение происходит потому, что fadeIn() и fadeOut() добавляются к очереди анимации с большей скоростью, чем они могут быть фактически очищены (7 секунд для пары, в зависимости от продолжительности). Поэтому вам нужно очистить очередь перед вызовом новой замирающей анимации.

Это делается с помощью stop(true), который является коротким для stop(true,false), инструкция по Jquery (1) очистить очередь, но (2), не переходить к конечному состоянию анимации:

$("#RefConflictSelf").stop(true).fadeIn(1000).fadeOut(6000); 

В зависимости от эффект, который вы хотите достичь, иногда stop(true,true) может удовлетворить ваши потребности лучше, так как он инструктирует очистить очередь и, переходя к окончательному состоянию текущей очереди (-ов) очереди.


Хотя вы не показали разметку, на основе вашего вопроса:

Как мне сделать JQuery скрыть все предыдущие замирания DIV сообщений, но затем позволяют новейшее ДИВО сообщение выгорает, тогда, как обычно? (Если , конечно, щелкнули еще одну кнопку, и в этом случае старый токообразный должен быть затоптан, а новому разрешено работать.)

... У меня такое чувство, что вы являетесь рециркуляцией идентификаторов. Помните, что ID должен быть уникальным в документе HTML. Поведение браузера для обработки нескольких идентичных идентификаторов по определению остается неопределенным, но обычно (разумно, вроде) выбирает первое вхождение и игнорирует остальные.

p/s: Я служу write an article why .stop() is very useful при работе с анимацией jQuery несколько месяцев год назад.

+1

Он также может захотеть ['.finish'] (http://api.jquery.com/finish/), если он хочет, чтобы состояние прыгало до конца всех поставленных в очередь действий. – Stryner

+0

Терри, ты герой. Он работает отлично. BTW Я не повторял идентификаторы, так что часть была в порядке. Ваше первоначальное предложение разрешило это для меня: $ («# RefConflictSelf»). Stop (true) .fadeIn (1000) .fadeOut (6000); – HerrimanCoder