How to use delay on an element in a jQuery Plugin

Question

I would like to create a plugin that does the behaviors of this jquery: http://www.stevenjsteele.com/projectmenu/index.html

here is the code for the non-plugin version:

$(document).ready(function(){ 
  if (document.getElementById || document.getElementsByTagName); 

        $('.item0').css({top : '-100px'});

        $('.item1').css({top : '-200px'}); 

        $('.item2').css({top : '-300px'});  

        $('.item3').css({top : '-400px'}); 

        $('.item4').css({top : '-500px'});    

        $('.item5').css({top : '-600px'}); 

        $('.item6').css({top : '-700px'});   

        $(window).load(function() {
          $('.item0').delay(400).animate({top : '0px'});

          $('.item1').delay(350).animate({top : '0px'});

          $('.item2').delay(300).animate({top : '0px'});

          $('.item3').delay(250).animate({top : '0px'});

          $('.item4').delay(200).animate({top : '0px'});

          $('.item5').delay(150).animate({top : '0px'});

          $('.item6').delay(100).animate({top : '0px'});
        });
});

What I have for a plug-in so far is here: http://www.stevenjsteele.com/projectmenu/plugin.html

here is the code for the plugin version:

$(document).ready(function() {
    $('#menuItem').dropMenu();  
}); 

(function($){
    $.fn.extend({
        //plugin name - dropMenu
        dropMenu: function(options) {

            var defaults = {
                startPosition : -300,
                positionTop : 10,  
                listItem : -70,
            };

            var options = $.extend(defaults, options);

            return $(this).each(function() {
                  var o = options;
                  var obj = $(this);               
                  var items = $("li", "a", obj);   

                  itemValue = $("li").text(); 

                  //alert(itemValue);

                  $('#menuItem').css({marginTop : o.startPosition});

                  $('#menuItem').animate({marginTop : o.positionTop}, 100);

                  $('li').css({marginTop : o.listItem});//.delay(100);

                  $('li').animate({marginTop : o.positionTop}, 500); 

            }); 
        }
    });
})(jQuery);

How do you delay the list item (li's) behavior in the plug-in ?

Answer 1

You could increment a delay value.