如何在jQuery插件中使用元素的延迟

时间:2011-04-22 01:18:40

标签: jquery plugins

我想创建一个执行此jquery行为的插件: http://www.stevenjsteele.com/projectmenu/index.html

这是非插件版本的代码:

$(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'});
        });
});

到目前为止,插件的内容如下: http://www.stevenjsteele.com/projectmenu/plugin.html

这是插件版本的代码:

$(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);

如何延迟插件中列表项(li)的行为?

1 个答案:

答案 0 :(得分:1)

您可以增加延迟值。