http://lifeto.cafe24.com/xe/request#
如果你转到这个页面,我已经使用了以下代码,以便在我滚动页面时给出'fadein'效果。 我已经通过使用jquery addclass和animate.css
完成了这项工作(https://daneden.github.io/animate.css/)
同时我使用了jscroll.js来赋予它无限的滚动效果。
jQuery(document).ready(function() {
jQuery('tr').waypoint(function() {
jQuery('tr').addClass('animated fadeIn');
}, {
offset: '75%'
});});
这是我用于无限滚动的脚本
/* infinite scroll */
jQuery(document).ready(function(){
jQuery('.board_content').jscroll({
loadingHtml: '<center><img src="layouts/window/ajax-loader.gif" alt="Loading" /> Loading...</center>',
padding: 0,
contentSelector: '.board_list',
autoTriggerUntil: 5,
nextSelector:'.next_button'
});
});
正如您所看到的,前10个是可见的,因为addclass工作正常。
但是对于接下来的20秒仍然是不透明度:0因为它们稍后被jscroll.js动态添加到dom中
有谁能告诉我如何解决这个问题?
感谢。
答案 0 :(得分:1)
您需要在添加内容后运行waypoint
脚本以绑定它们。
类似的东西:
$('.infinite-scroll').jscroll({
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
padding: 20,
nextSelector: 'a.jscroll-next:last',
contentSelector: 'li',
callback: function() {
jQuery('tr').waypoint(function() {
jQuery('tr').addClass('animated fadeIn');
}, {
offset: '75%'
});
}
});