Question

我使用一些jquery为条形图设置动画，但是在页面下方足够远，用户需要滚动才能看到它。

当用户滚动到其位置时，如何将其设置为动画。

arrayOfDataMulti = new Array(
        [[936656,556247],'2005'],
        [[913318,453238],'2006'],
        [[921707,362327],'2007'],
        [[894496,376587],'2008'],
        [[738624,326656],'2009'],
        [[759379,311336],'2010'],
        [[746972,332962],'2011'],
        [[666210,295708],'2012'],
        [[568817,286204],'2013'],
        [[548247,315037],'2014']

    );  

arrayOfDataMultiForSort = new Array(
        [[936656,556247],'2005'],
        [[913318,453238],'2006'],
        [[921707,362327],'2007'],
        [[894496,376587],'2008'],
        [[738624,326656],'2009'],
        [[759379,311336],'2010'],
        [[746972,332962],'2011'],
        [[666210,295708],'2012'],
        [[568817,286204],'2013'],
        [[548247,315037],'2014']
    );  

arrayOfColors = new Array('#006446','#6ebd44');

$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors,legends: ['Scope 1 / Direct','Scope 2 / Indirect'],

legend：true}）;

$('#multiMulti').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, type: 'multi' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; type: 'multi'");               
});

$('#multiLegend').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, legend: true, legends: ['ads','leads','google ads'] });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; legends: ['ads','leads','google ads'],<br />&nbsp;&nbsp; legend: true");               
}); 



$('#multiSortDesc').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMultiForSort, colors: arrayOfColors, sort: 'desc' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; sort: 'desc'");                
});

$('#multiPrePost').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, prefix: '$', postfix: 'k' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; prefix: '$',<br />&nbsp;&nbsp; postfix: 'k'");             
}); 

$('#multiHideValues').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, showValues: false });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; showValues: false");               
}); 

$('#multiNoAnimate').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, animate: false });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; animate: false");              
});         

$('#multiClear').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors });
    $('#multiDyn').html("");                
}); 
</script>

Answer 1

this answer会满足您的目的吗？

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

如果没有，该主题还有其他一些好的答案，包括jQuery的$().appear()函数。

滚动到时触发jquery动画

1 个答案: