我打算使用一个名为的 jQuery 插件图表.js http://www.chartjs.org/用于图形和图表。然而,在较大的页面上,这些图表的动画甚至在用户看到它们之前就已经完成了。
我的问题是,只有当特定 div/部分的内容在视口内可见时(如 Charts.js 网站上所描述的那样),我们如何淡入该内容。当我们向下滚动时,内容会依次淡入,因此甚至不会错过图表的动画。我如何在 jQuery 的帮助下实现这一目标?
看一眼this http://jsfiddle.net/tcloninger/e5qaD/js小提琴。当方框变得可见时,作者就会在方框中消失。您可能需要调用 Chart.js 在图表变得可见时创建图表,而不是仅仅淡入它们(也就是说,如果您想要精美的图表动画,而不仅仅是淡入:-))我已经调整了小提琴并将其包含在下面:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)