でグラフをアニメーション化下にスクロールし、最初のグラフをアニメーション化します。jQueryのは、私は、ボタンのクリックでアニメーション化しています二つのグラフがあり、下にスクロールし、ウェイポイント
2番目のボタンをクリックすると、もう一度スクロールして、最初のグラフを非表示にしてから2番目のグラフをアニメートします。
私が抱えている問題は、両方のグラフがボタンをクリックすると、ボタンをクリックするたびにどのようにアニメーション化することができますか?
私が持っている他の問題は、上下にスクロールすると、グラフの上のラベルがちらつくことです。どのように私はそれらをちらつくから守ることができますか?私はWaypointsを使っています。あなたは上記のCodePenリンクで私の完全なコードを表示することができます
は、ここに私のJSです:
$('#q-graph').css('opacity', 0);
$('.label, .label2').hide();
$(document).ready(function(){
$('#q2-fade').hide();
//navigation functionality
$("#graph1").click(function(){
$('html, body').animate({
scrollTop: $("#graphs-container").offset().top
}, 1000);
$('#q2-fade, #q3-fade, #q4-fade, #q5-fade, #q6-fade, #q7-fade, #title2, #title3, #title4, #title5, #title6, #title7, #title8, .label').hide();
$('#q-fade').fadeIn('slow', function(){
$('#q-graph').waypoint(function(direction) {
if (direction === 'down') {
$('#q-graph').addClass('animated fadeIn');
$("#q-graph td#one").animate({height:"100%"}, 300, "linear");
$("#q-graph td#two").delay(100).animate({height:"100%"}, 300, "linear");
$("#q-graph td#three").delay(120).animate({height:"100%"}, 300, "linear");
$("#q-graph td#four").delay(140).animate({height:"100%"}, 300, "linear");
$("#q-graph td#five").delay(160).animate({height:"100%"}, 300, "linear");
$("#q-graph td#six").delay(180).animate({height:"100%"}, 300, "linear");
$("#q-graph td#seven").delay(200).animate({height:"100%"}, 300, "linear");
$("#q-graph td#eight").delay(220).animate({height:"100%"}, 300, "linear");
$("#q-graph td#nine").delay(240).animate({height:"100%"}, 300, "linear");
$("#q-graph td#ten").delay(260).animate({height:"100%"}, 300, "linear");
$("#q-graph td#eleven").delay(280).animate({height:"100%"}, 300, "linear");
$("#q-graph td#twelve").delay(300).animate({height:"100%"}, 300, "linear");
$("#q-graph td#thirteen").delay(320).animate({height:"100%"}, 300, "linear");
$("#q-graph td#fourteen").delay(340).animate({height:"100%"}, 300, "linear");
$("#q-graph td#fifteen").delay(360).animate({height:"100%"}, 300, "linear");
$("#q-graph td#sixteen").delay(380).animate({height:"100%"}, 300, "linear");
$('.label').delay(400).fadeIn('slow');
}
}, {
offset: '10%'
});
});
});
$("#graph2").click(function(){
$('html, body').animate({
scrollTop: $("#graphs-container").offset().top
}, 1000);
$('#q-fade,#q3-fade,#q4-fade,#q5-fade,#q6-fade,#q7-fade, #title1, #title3, #title4, #title5, #title6, #title7, #title8').fadeOut('fast', function(){
$('#q2-fade').fadeIn('slow', function(){
$('#q2-graph').waypoint(function() {
$('#q2-graph').addClass('animated fadeIn');
$("#q2-graph td#one").animate({height:"100%"}, 300, "linear");
$("#q2-graph td#two").delay(100).animate({height:"100%"}, 300, "linear");
$("#q2-graph td#three").delay(120).animate({height:"100%"}, 300, "linear");
$("#q2-graph td#four").delay(140).animate({height:"100%"}, 300, "linear");
$("#q2-graph td#five").delay(160).animate({height:"100%"}, 300, "linear");
$("#q2-graph td#six").delay(180).animate({height:"100%"}, 300, "linear");
$('.label2').delay(200).fadeIn('slow');
}, { offset: '10%' });
});
});
});
});
私も遅延を使用するよりも、他のこれらのグラフをアニメーション化するためには、はるかに簡単かつきれいな方法があります確信しています、私はまだJSについて学ぶことがたくさんあります。関心の