jQuery queue on matched set

Question

I'm trying to trigger a sequence of effects (simple animated show/hide) on a group of images inside of div where images are tagged with classnames that provide a filtering ability thru class selectors.

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

Now, I want to show the images matching a tag like:

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

Where tag1 was the old active tag and tag2 is the new active tag. I thought I could just drop the show function into a callback on the hide function call, but it ends up calling the show method repeatedly (as many times as there were items hidden in the first call).

Could anyone suggest how to use the callback only once on the first matched set, or provide another way to use jQuery's queue to pull these off in sequence? The challenge as I see it is that the show effect doesn't necessarily impact the same images that were hit with the hide effect.

One thing I tried was using a facilitating element where I could attach the effects (like assigning them on a queue on myDiv) but I couldn't see a way to make that work properly.

Thanks!

Answer 1

What I would do is make a variable that you can store if the show has been fired then wrap the call for the show in an if check. What ever event triggers the hides before you fire them reset this variable. That should insure that the show will fire only once after the hides.

var fired = false;

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