JQuery fading loop for two objects at a time

Question

With some help from SO, I have a bit of javascript/jquery that cycles through some logos, fading them in and out. I've been trying to modify it to fade two logos, that are side by side, at once.

You can see a jsfiddle version of my code here : http://jsfiddle.net/BvLb4/3/

As you can see, i thought creating a different class for the left and right logo would be a good way to position two logos side by side. So my html now looks like this:

        <div id="img0" class="logo">
        <img src="http://i.imgur.com/JeBWX.jpg"/>
        </div>
        <div id="img1" class="logo2">
        <img src="http://i.imgur.com/DyyY3.jpg"/>
        </div>
        <div id="img2" class="logo">
        <img src="http://i.imgur.com/aVDZ1.jpg"/>
        </div>
        <div id="img3" class="logo2">
        <img src="http://i.imgur.com/JxLQt.jpg"/>
        </div>

I'm having trouble changing the recursive loop i had for a single logo to work with two at a time:

$(document).ready(function (){

    var fadeDuration = 1000;
    var timeBetweenFade = 3000;
    var totalLogos = $('.logo').length + $('.logo2').length;
    var currentLogo;
    var idx = 0;

    var loop = function(idx, totalLogos) {
        var currentLogo = "#img" + idx;
        $(currentLogo)
        .delay(100)
        .fadeIn(fadeDuration)
        .delay(timeBetweenFade)
        .fadeOut(fadeDuration, function(){
            loop( (idx + 1) % totalLogos, totalLogos);
        });
    }
    loop(0, totalLogos);
});

My initial thought was to create an additional var currentLogo2 = "#img" + (idx+1); , apply all the same methods to it as well as currentLogo and then increment the idx by 2. It makes sense in my head but so far my attempts to implement it have not been successful and im generally not sure if that's the best approach anyway as the codes a bit repetitive. What would you suggest as a solution to getting a loop of logos that fade in and out two(or more) at a time?

Answer 1

If you must have the loop, then you need to move the later calls to loop:

loop( (idx + 1) % totalLogos, totalLogos);

outside of that fadeOut callback. jQuery.fadeOut will call the function you pass into it only after the animation has completed ( jQuery fadeOut Documentation ), which will cause future calls made in this fashion to be sequential. If you move it outside like so:

var loop = function(idx, totalLogos) {
  var currentLogo = "#img" + idx;
  $(currentLogo)
  .delay(100)
  .fadeIn(fadeDuration)
  .delay(timeBetweenFade)
  .fadeOut(fadeDuration);

  loop( (idx + 1) % totalLogos, totalLogos);
}

then it should behave a little more like you're hoping.

Answer 2

instead of loop you need to do that

   $([id^="img"]).delay(100)
    .fadeIn(fadeDuration)
    .delay(timeBetweenFade)
    .fadeOut( fadeDuration);

applay to all images whose id starts with "img"

Answer 3

None of the answers seemed to solve the problem but i eventually got to a solution myself. You can view the demo of the solution here: http://jsfiddle.net/BvLb4/9/ . For anyone who comes across this in the future it would be easy to alter for however many images you wanted side-by-side.

This was very much a noob trial and error approach so if anyone has any suggestions for improvement do comment!

JS:

$(document).ready(function (){

    var fadeDuration = 1000;
    var timeBetweenFade = 3000;
    var totalCycles = ($('.logo').length) /2;
    var idx = 0;

    var loop = function(idx, totalCycles) {
        var currentLogo = ".img" + idx;
        $(currentLogo).delay(100);
        $(currentLogo).fadeIn(fadeDuration);
        $(currentLogo).delay(timeBetweenFade);
        $(currentLogo).fadeOut(fadeDuration,
        function(){
            idx++;
            if(idx > totalCycles){
                idx = 0;
            }
            loop( idx, totalCycles);

        });

    }
    loop(0, totalCycles);
});​

HTML:

//link js and jquery here
<div id="container">

        <div id="logos_content">
        <h2>Associates</h2>
        <div class="logo img0">
        <img src="http://i.imgur.com/JeBWX.jpg"/>
        </div>
        <div class="logo img0">
        <img src="http://i.imgur.com/DyyY3.jpg"/>
        </div>
        <div class="logo img1">
        <img src="http://i.imgur.com/aVDZ1.jpg"/>
        </div>
        <div class="logo img1">
        <img src="http://i.imgur.com/JxLQt.jpg"/>
        </div>
        </div>

</div>

CSS:

#container
{
    width: 400px;
    height: 200px;
    background-color: DodgerBlue;
}
img { max-width: 100% }

#logos_content
    {
    padding: 0.5em 3em;
    height: 150px;
    }
        .logo
        {
        float: left;        
        display: none;
        max-width: 45%;
        position:relative;
        margin-right:0.5em;
        }