Очередь jQuery для соответствующего набора

Question

Я пытаюсь вызвать последовательность эффектов (простое анимированное отображение / скрытие) для группы изображений внутри div, где изображения помечены именами классов, которые обеспечивают возможность фильтрации с помощью селекторов классов.

<div id="myDiv">
    <img class="tag1 tag2 tag3" ... />
    <img class="tag2 tag3" ... />
    <img class="tag1 tag2" ... />
    ...more image tags...
</div>

Теперь я хочу показать изображения, соответствующие тегу вроде:

$('#myDiv .tag1').hide('blind', {}, 300);    
$('#myDiv .tag2').show('blind', {}, 300);

Где tag1 - старый активный тег, а tag2 - новый активный тег. Я думал, что мог бы просто бросить функцию show в обратный вызов при вызове функции hide, но в итоге он вызывал метод show несколько раз (столько раз, сколько было элементов, скрытых в первом вызове).

Может ли кто-нибудь предложить, как использовать обратный вызов только один раз в первом сопоставленном наборе, или предоставить другой способ использовать очередь jQuery для последовательного их выполнения? Проблема, которую я вижу, состоит в том, что эффект шоу не обязательно влияет на те же изображения, которые были поражены эффектом скрытия.

Я пытался использовать вспомогательный элемент, к которому я мог прикрепить эффекты (например, назначить их в очередь в myDiv), но я не мог найти способ заставить это работать должным образом.

Спасибо!

Answer 1

Что бы я сделал, это сделал бы переменную, которую вы можете сохранить, если показ был запущен, затем обернуть вызов для показа в проверку if. Что бы ни происходило, событие запускает шкуры, прежде чем вы их запустите, сбросьте эту переменную. Это должно гарантировать, что шоу будет запущено только один раз после шкуры.

var fired = false;

function showhide()
{
  fired=false;
  $('#myDiv .tag1').hide('blind', function(){
    if(!fired)
    {
      fired=true;
      $('#myDiv .tag2').show('blind', {}, 300);
    }
  }, 300);
}