JQuery Feature List Slide Delay

Question

So here's what I'm trying to do. I am sliding 3 div in 3 different columns. I want to put a delay on this script so that the 3 columns change at the same speed but they change at different times. Here's the javascript

/*
* FeatureList - simple and easy creation of an interactive "Featured Items" widget
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/
* Version: 1.0.0 (01/09/2009)
* Copyright (c) 2009 jQueryGlobe
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
* Requires: jQuery v1.3
*/
(function($) {
$.fn.featureList = function(options) {
    var tabs    = $(this);
    var output  = $(options.output);

    new jQuery.featureList(tabs, output, options, speed);
    return this;    
};

$.featureList = function(tabs, output, options, speed) {
    function slide(nr) {
        if (typeof nr == "undefined") {
            nr = visible_item + 1;
            nr = nr >= total_items ? 0 : nr;
        }

        tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

        output.stop(true, true).filter(":visible").fadeOut();
        output.filter(":eq(" + nr + ")").fadeIn(function() {
            visible_item = nr;  
        });
    }

    var options         = options || {}; 
    var total_items     = tabs.length;
    var visible_item    = options.start_item || 0;

    options.pause_on_hover      = options.pause_on_hover        || true;
    output.pause_on_hover       = output.pause_on_hover         || true;
    options.transition_interval = options.transition_interval   || speed;

    output.hide().eq( visible_item ).show();
    tabs.eq( visible_item ).addClass('current');

    tabs.click(function() {
        if ($(this).hasClass('current')) {
            return false;   
        }

        slide( tabs.index( this) );
    });

    if (options.transition_interval > 0) {
        var timer = setInterval(function () {
            slide();
        }, options.transition_interval);

        if (options.pause_on_hover) {
            tabs.mouseenter(function() {
                clearInterval( timer );

            }).mouseleave(function() {
                clearInterval( timer );
                timer = setInterval(function () {
                    slide();
                }, options.transition_interval);
            });
        }
        if (output.pause_on_hover) {
            output.mouseenter(function() {
                clearInterval( timer );

            }).mouseleave(function() {
                clearInterval( timer );
                timer = setInterval(function () {
                    slide();
                }, options.transition_interval);
            });
        }
    }
};
})(jQuery);

$(document).ready(function() {
$.featureList(
    $("#sliderSelection li"),                       //Your Menu
    $("#slider img"),                               //Your Content
    {start_item:0},                                 //Starting Item
    5000                                            //Change Speed
);
$.featureList(
    $("#graphicSelect li"),                         
    $("#featuredDesign .design"),           
    {start_item:0},                                 
    1000
);
$.featureList(
    $("#webSelect li"),                         
    $("#featuredWeb .web"),             
    {start_item:0},                                 
    1000                                            
);
$.featureList(
    $("#marketSelect li"),                          
    $("#featuredMarket .market"),           
    {start_item:0},                                 
    1000                                            
);
});

I just want to add a delay() as a 5th parameter. my HTML is about 300 lines long and my css is just as lengthy so I won't bog down the page with that. Any help would be much appreciated! http://jqueryglobe.com/article/feature-list

Answer 1

can U try wrapping all "$.featureList()" section with setTimeout( f, timeOut ) function, make sure U set up timeOut param correctly

setTimeout(function() {
  $.featureList(
    $('#sliderSelection li'),                       //Your Menu
    $('#slider img'),                               //Your Content
    {start_item:0},                                 //Starting Item
    5000)                                          //Change Speed
} , 1000);

setTimeout(function() {
  $.featureList(
    $('#graphicSelect li'),
    $('#featuredDesign .design'),
    {start_item:0},                                 
    1000)
} , 2000);
setTimeout(function() {
  $.featureList(
    $('#webSelect li'),
    $('#featuredWeb .web'),             
    {start_item:0},                                 
    3000)                                          
  } , 1000);

setTimeout(function() {
  $.featureList(
    $('#marketSelect li'),
    $('#featuredMarket .market'),
    {start_item:0},                                 
    1000)                                          
} , 1000);

EDIT: Sorry, I was sure the previous code would be working. I've updated it to make sure it's fine. Proof is at : http://jsfiddle.net/uDrg5/2/