Question

I wrote some jQuery to slide some text in, and then after a delay, slide it out again and slide the next one in. Here is the script:

var About = {
    init: function () {
        var text_spans = $('.headline-box a'),
            extracts = new Array(),
            delay = 5,
            current = 0;

        text_spans.each(function (index) {
            if ($(this).is(":visible")) {
                current = index;
            }
            extracts.push($(this));
        });

        var interval = setInterval(function () {

            target = (current < (extracts.length - 1)) ? current + 1 : 0;

            extracts[current].slideUp('slow');
            extracts[target].slideDown('slow');

            current = target;

        }, delay * 500);

    }
}

About.init();

It works, but I have two instances of .headline-box on the page, each with 3 links (a) in. Like this (simplified):

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

Everything works fine (they all slide in, and out) but here’s the problem: one box will run through the sequence once, and stop, wait for the other box to run through it, and then the first will start again.

Does anyone have any idea why and how this could be fixed, so they both run simultaneously? Thank you for any help 🙂

Answer 1

You can create a class About, and create two instance:

function Abount() {
   //define class here
}

$(function() {
    $('.headline-box').each(function(n, elem) {
        new About(elem);
    });
})

Complete version: http://jsfiddle.net/vAbZ6/