Question

I am trying to make a simple searcher/highlighter and I am running into difficulties with inconsistent results/nothing happening when I test it out.

I think the biggest gap is my understanding of how the callback functions should work and what the selectors are able to match.

Ideally when one clicks on the tag, everything should fade out and only the dives with the matching tags in them should reappear. If nothing matches then the nothing found div should appear and the reset should fade veryhtign out and make all the divs (sans nomatch div) reappear unhighlighted.

Anyone provide some clarification on where I can improve?

Edit: See the link in the comments to see my code.

More clarification on problems:
Click on a tag (old, photography, guide) and then click on reset. All three parts should reappear but only two do.

Randomly The no results found will show up.

If you select a tag, then search for a different one, the fade ins and outs will be asynchronous.

Answer 1

The problem is that the .fadeout() was on each .workshopentry so would really be 3 fade outs. Therefore the animation complete callback function was being called 3 times as well! So the logic to determine which new entries to show and hide was being executed 3 times and causing the strange multiple fading.

I have updated the jsfiddle with a more robust solution.

Let me know if you need any more explanation of what the JavaScript is doing.