Mike Mike - 3 months ago 7
CSS Question

Looping fade between two divs - require modification to answer to this post

The accepted answer to this stackoverflow question is exactly what I need, but with one modification.

I need multiple

.boxes
. Not just one.

Each "box" has two divs that need to be faded between.

From this snippet of the code:

$(document).ready(function () {
var allBoxes = $("span.boxes").children("span");
transitionBox(null, allBoxes.first());
});


I understand that I should maybe first, put all the
.boxes
into an array and then loop over that to get each of their children
span
elements.

But I'm not entirely sure that this is (a) the best practice, (b) correct, and (c) if there is just a better way in the first place.

Answer

Do you mean something like this http://jsfiddle.net/8odoros/CYJLA/306/ ?

Using

$( "div.boxes" ).each(function( index ) {
  var allBoxes = $(this).children("div");
  transitionBox(null, allBoxes.first());
});

applies the same effect to all .boxes

Comments