小贝子编程

添加类时使用.each添加延迟



我正在尝试创建一个简单的动画，其中每个字母将逐个缩放。在每个div中添加一个类时，是否有可能有1秒延迟?以下是我目前所做的:JSFiddle

<div class="animation">
    <div>a</div>
    <div>n</div>
    <div>i</div>
    <div>m</div>
    <div>a</div>
    <div>t</div>
    <div>e</div>
</div>
CSS

.animate_letters{
    float:left; 
    text-transform:uppercase; 
    font-size:80px; 
    display:inline; 
    margin-right:5px;
    animation:fancytext 1s cubic-bezier(0.3, 2, 0.35, 1.45) 0s normal none 1;
}
@keyframes fancytext{
  from {
    transform: scale(0) translateX(-40%); opacity:0;
  }
  to {
    transform: scale(1) translateX(0%); opacity:1;
  }
}
JAVASCRIPT

$(document).ready(function(){
    $.each( $('.animation'), function(i, animation){
        $('div', animation).each(function(){
        $(this).addClass('animate_letters')
        })
    })
})

您可以使用setTimeout():

$(document).ready(function(){
$.each( $('.animation'), function(i, animation){
  $('div', animation).each(function(ii){
  var data = $(this);
  setTimeout( function () {
    $(data).addClass('animate_letters')
 }, ii * 1000);
})})});

更新:你也不需要两个.each()。您可以使用选择器$('.animation div'):

将其缩小到一个.each()
$(document).ready(function(){
 $('.animation div').each(function(ii){
 var data = $(this);
 setTimeout( function () {
  $(data).addClass('animate_letters')
 }, ii * 1000);
})});
<

简化演示/strong>

扩展Milind Anantwar的答案，您需要使用setTimeout，但给每个字母一个不同的超时:

$(document).ready(function(){
    $('.animation').each(function(i, animation){
        $('div', animation).each(function(j, div){
            setTimeout(function() {
                $(div).addClass('animate_letters');
            }, 1000*j);
        });
    });
});

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium