JQuery Feature List Slide Delay

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

---

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/

---

If you wanted to avoid modifying the 3rd party plugin, one way would be to wrap these calls in basic js timers. If you extend it and there is an update later to the plugin, you are always having to keep your changes in sync.

var a=setTimeout("CALL1",1000);
var b=setTimeout("CALL2",2000);
var c=setTimeout("CALL3",3000);
var d=setTimeout("CALL4",4000);

Where CALL = FeatureList you want effects to run against.

Another option you have here is to add a param to the method, as you mentioned. You could apply the aforementioned idea there too. If it were me though, and I understood your question correctly, I would opt for the approach that didn't modify the plugin source when possible.