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

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;
        }