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
});

获得动画的部分具有数据延迟属性。

<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
});