2011-08-29 27 views
2

我怎样才能延迟each()被触发?jquery:我怎么能延迟每个()被触发

这是延迟每个盒子在特定时间淡出的代码。

$(document).ready(function(){ 

    var delay = 0; 
    $('.block-item:lt(16)').each(function(){ 

     //^^ do for every instance less than the 16th (starting at 0) 
     $(this).delay(delay).animate({ 
      opacity:0 
     },500); 
     delay += 500; 

    }); 


}); 

但我想触发each()之前的延迟时间约五秒钟。这可行吗?

这里是link

回答

0

在父母所有的利是会掉色一个如果它仅仅是一个的事延迟最初的动画,为什么不从5000延迟开始?

http://jsfiddle.net/QAWTy/1/

$(document).ready(function(){ 

    var delay = 5000; 
    $('.block-item:lt(16)').each(function(){ 

     //^^ do for every instance less than the 16th (starting at 0) 
     $(this).delay(delay).animate({ 
      opacity:0 
     },500); 
     delay += 500; 

    }); 


}); 
+0

明白了!这是完美的答案!谢谢。 – laukok

0

这是我为此专门做的一个片段。 可以调用iniFadeChildren($(“父”),‘礼’,500) 又经过

function iniFadeChildren(pParent, pChildrenType, pDelay, pSpeed){ 
    pParent.find(pChildrenType).css({display:'none'}); 
    if(!pChildrenType){pChildrenType='*'} if(!pDelay){pDelay=200} if(!pSpeed){pSpeed=300} 
    fadeChildren(pParent, pChildrenType, pDelay, 0, pParent.children(pChildrenType).length, pSpeed); 
} 

function fadeChildren(pParent, pChildrenType, pDelay, pNbr, pTotal, pSpeed){ 
    pParent.find(pChildrenType).eq(pNbr).fadeIn(pSpeed); 
    pNbr++; 
    if(pNbr!=pTotal){ 
     var command='fadeChildren('+pParent+', '+pChildrenType+', '+pDelay+', '+pNbr+', '+pTotal+')'; 
     t=setTimeout(function(){fadeChildren(pParent, pChildrenType, pDelay, pNbr, pTotal, pSpeed)}, pDelay); 
    } 
} 
+0

如果任何人对如何改善这种代码的想法,这可以理解 –

0
$('.block-item:lt(16)').delay(delay).each(function(){ 

     //^^ do for every instance less than the 16th (starting at 0) 
     $(this).animate({ 
      opacity:0 
     },500); 
     delay += 500; 

    }); 
) 
+0

这是行不通的。 'each'不是一个动画,所以它不会排队。因此延迟不会延迟每个。 –

0

当然可以,这样

$(document).ready(function(){ 

    var delay = 0; 
    setTimeout(function() { 
    $('.block-item:lt(16)').each(function(){ 

     //^^ do for every instance less than the 16th (starting at 0) 
     $(this).delay(delay).animate({ 
      opacity:0 
     },500); 
     delay += 500; 

    }); 

    }, 5000); 

}); 
+0

欢迎您 –

0

你的意思只是每个初始呼叫等待5秒钟之后?如果是使用setTimeoutsetTimeout Reference

Live Demo

$(document).ready(function(){ 

    var delay = 0; 
    // Wrap the function with setTimeout 
    setTimeout(function(){ 
     $('.block-item:lt(16)').each(function(){ 

      //^^ do for every instance less than the 16th (starting at 0) 
      $(this).delay(delay).animate({ 
       opacity:0 
      },500); 
      delay += 500; 
     }); 
    }, 5000); // 5000 = 5 seconds 


}); 
0

您可以使用setInterval的方法来实现这一目标。

$(document).ready(function(){ 
    var count = 0; 
    var $blockItems = $('.block-item:lt(16)'); 
    var timer; 
    timer = setInterval(function(){ 
       if(count == 16){ 
        clearInterval(timer); 
        return; 
       } 
       $blockItems.eq(count).animate({ 
       opacity:0 
       },500); 
       count++; 
      }, 500); 
}); 
0

利用的一些新功能http://jsfiddle.net/7czu4/

function HideItems(items, delay) { 
    $(items[0]).fadeOut() 
     .delay(delay) 
     .promise() 
     .done(function() { 
      items.splice(0, 1); 
      if (items.length > 0) 
      { 
       HideItems(items, delay);  
      }    
    });  
} 

var items = $(".item"); 

HideItems(items, 5000);