waypoint.js animate.css设置延迟或超时

Question

已更新：想通了...更新的解决方案，它适用于每个变得可见的元素。

$('.effect-fade-ttb').waypoint(function() { 
     var $this = $(this); 
     setTimeout(function() { 
       $this.addClass('animate-fade-ttb'); 
     }, $this.data('delay')); 
}, { 
     offset: '80%', 
     triggerOnce: true 
}); 

得到动画的部分有数据延迟attr。

<div data-delay="500" class="effect-fade-rtl animate animate-fade-rtl"> 
    <div class="serviceBoxWrapper"> 
     <div style="background: #000000" class="serviceboxIconHolder"> 
      <span class="fa fa-glass"></span> 
     </div> 
     <div class="serviceboxContent"> 
      <h3>Fade RTL</h3> 
     </div> 
    </div> 
</div> 

我想弄清楚如何使用数据延迟值来设置延迟。因为这是基于短代码选项动态添加的。

Answer 1

我已经为您提供了如何使用jQuery集成数据属性的链接。 http://jsfiddle.net/2Fc8w/4/

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<div class="box"> 
    <div class="animate_me" data-delay="1000"> 
     Click me 
    </div>  
</div> 
<div class="box"> 
    <div class="animate_me" data-delay="100"> 
     Click me 
    </div>  
</div> 
<div class="box"> 
    <div class="animate_me" data-delay="500"> 
     Click me 
    </div>  
</div> 

JQUERY

$(function(){ 
     $('.animate_me').click(function(){ 
       delay_speed = $(this).data('delay') 
      $(this).delay(delay_speed).animate({'left':'+=40px'}) 
      $(this).delay(delay_speed).animate({'top':'+=40px'}) 
     })   
    }) 

CSS

.box{ 
    height:40px; 
    float:left; 
    width:100%; 
} 
.animate_me{ 
    position:absolute; 
    background-color:#00d4d4; 
    width:100px; 
    height:40px; 
    color:#fff; 
    font-weight:bold; 
    line-height:40px; 
    text-align:center; 
    text-transform:uppercase; 
} 

此代码应反映新的JS网站

Answer 2

添加CSS类隐藏

.hide { 
opacity :0; 
} 

$('.effect-fade-ttb').waypoint(function() { 
     $(this).addClass('hide'); 
     var $this = $(this); 
     setTimeout(function() { 
       $this.addClass('animate-fade-ttb'); 
     }, $this.data('delay')); 
}, { 
     offset: '80%', 
     triggerOnce: true 
});