Issue Summary (Fiddle):
I'm trying to make all elements fade out simultaneously when clicked, but the current code causes the target to trigger three times resulting in three alert() calls. I want them to fade together without using a wrapper element.
How can I make sure that the actions inside fadeOut() completion only execute once?
Code Snippet:
HTML:
<div class="things">
<div id="one"></div>
</div>
<div class="things">
<div id="two"></div>
</div>
<div class="things">
<div id="three"></div>
</div>
JavaScript:
var triggerCount = 0;
$('.things').mousedown(function() {
$('.things').fadeOut(2000, function() {
triggerCount++;
alert('fading '+triggerCount+' time(s)');
});
});