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

更新：弄清楚了… 更新的解决方案, 适用于每个可见的元素。

$('.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>

我试图弄清楚如何使用数据延迟值来设置延迟。因为这是根据shortcode选项动态添加的。
#1我已经为你提供了有关如何使用jQuery集成data属性的链接。 http://jsfiddle.net/2Fc8w/4/
的HTML

< script src="http://img.readke.com/220604/04252220W-0.jpg"> < /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网站
#2【waypoint.js animate.css设置延迟或超时】添加一个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 });