Databases
StackOverflow2013
Postsdbo
POjQuery .delay() timing issue, not all the animations have a consistant delay?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery .delay() timing issue, not all the animations have a consistant delay?
    text
    copied!<p>I have a simle bit of jQuery code which hides a group of gallery objects when the controls are clicked, and then shows the filtered objects one by one.</p> <p>The issue is that some of the delays are inconsistent and not evenly timed. The delay increments every time an object begins to fadein to make them appear one by one, but one or two appear at the same time on random occurances? </p> <p>Heres the code:</p> <pre><code>$(document).ready(function() { var controls = $('#portfolio-nav'); var gallery = $('#gallery'); $('a', controls).click(function(){ /* setup variables */ var nav = $(this).closest('ul'); var listItem = $(this).parent(); var current = 'current'; var classes = listItem.attr("class").split(/\s/); var elementsToShow = new Array(); var allElements = gallery.children(); /* filter classes to excude .current */ classes = jQuery.grep(classes, function(value){ return value != current; }); var sector = classes[classes.length -1]; /* remove all .current classes */ nav.children('.current').each(function() { $(this).removeClass('current'); }); /* add the .current class to the clicked li */ $(this).parent().addClass('current'); /* define which elements to show */ $(allElements).each(function() { var element = $(this); var elementSectors = element.attr("class").split(/\s/); if(sector !== 'all'){ if(jQuery.inArray(sector, elementSectors) !== -1){ elementsToShow.push(element); } } else { elementsToShow.push(element); } }); /* log the elements */ //console.log(elementsToShow); /* hide/show all the elements */ animateThem(allElements, elementsToShow); /* clear the array for the next click */ elementsToShow.length = 0; return false; }); function animateThem(allElements, elementsToShow){ $(allElements).fadeOut('fast').delay(200); $(elementsToShow).each(function(index) { $(this).delay(100*index).fadeIn('normal'); }); } }); </code></pre> <p>Heres a quick snippet of the html:</p> <pre><code>&lt;nav id="portfolio-nav"&gt; &lt;ul&gt; &lt;li class="all current"&gt;&lt;a href="#all"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li class="branding"&gt;&lt;a href="#branding"&gt;Branding&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="gallery"&gt; &lt;div class="grid-3 media-holder branding"&gt; ... &lt;/div&gt; &lt;div class="grid-3 media-holder marketing"&gt; ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Its probably an easy fix as my jQuery isn't great, but if anyone knows of a reason why this would happen I'd love to know.</p> <p>Cheers,</p> <p>Dave</p> <p><strong>Edit: Had issues with declaring the array elements and was getting an undeclared error...after some tweaking its working as expected (thanks to Dannie Hansen), JSFiddle is below if anyone is interested:</strong></p> <p><a href="http://jsfiddle.net/daveaspinall/8VKad/9/" rel="nofollow">http://jsfiddle.net/daveaspinall/8VKad/9/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload