Search code examples
javascriptjquerycssloopsfade

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.

Solution

  • 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