Question

有一个lazyload样式脚本我正在研究当用户进入视图时调用函数（它的图形从地面抬起）。我遇到的问题是图表往往会不断改变它们的高度（50.04012040％等）。我还有其他div，一旦这个高度达到它的data-attr就显示出来。

JS：

  $(window).scroll(function(){

    var wScroll = $(this).scrollTop();
  var total = 100;

  if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

            // Quote Form x-slide in
        if(wScroll > $('#statistics').offset().top - ($(window).height() / 1.7)) {

            // Animated graph
            $(function() {
                $("#bars li .bar").each( function( key, bar ) {
                    var percentage = $(this).data('percentage');

                    $(this).animate({
                        'height' : percentage + '%'
                    }, 1000);
                });
            });
        }
    }
});

$(".stat-button").each(function(){
        $(this).mouseover(function () {
            console.log('hover');
                    $(this).siblings(".stat").fadeIn('1000');
        }).mouseout(function () {
                    $(this).siblings(".stat").fadeOut('1500');
        });
    });

问题是，在满足百分比之前，统计按钮无法进入视图，但如果这种情况不断变化，则永远不会。

小提琴是：https://jsfiddle.net/no0mvffz/

jQuery窗口视图加载动画

0 个答案: