如何告诉我的Jquery命令行在每个命令行后添加延迟

Question

我有什么：

$(document).ready(function(e){
                // NL flag
    $(this).find("#topbar_nl").width('100%');
    $(this).find("#midbar_nl").width('100%');
    $(this).find("#botbar_nl").width('100%');
});

我需要它做这样的事情：

$(document).ready(function(e){
                // NL flag
    $(this).find("#topbar_nl").width('100%');(wait for 2 seconds then go to next command line)
    $(this).find("#midbar_nl").width('100%');(wait for 2 seconds then go to next command line)
    $(this).find("#botbar_nl").width('100%');(wait for 2 seconds then go to next command line)
});

Answer 1

嗯，你可以这样做

var arr =["#topbar_nl", "#midbar_nl", "#botbar_nl"], index = 0;
setInterval(function(){ // use setInterval for the delay
   if(index < arr.length) {
      $(this).find(arr[count]).width('100%'); // do the work
   }  index++; // update the index
}, 2000) // of 2 seconds

Answer 2

您可以使用animate方法：

$(this).find("#topbar_nl").animate( { width: '100%' }, 2000, function() {
    $(this).find("#midbar_nl").animate( { width: '100%' }, 2000, function() {
        $(this).find("#botbar_nl").animate( { width: '100%' }, 2000 );
    });
});