3
动画图形，我有两个图，我就按一下按钮动画：的JQuery上点击按钮，向下滚动并与航点
http://codepen.io/anon/pen/oLwGWq
所以基本上第一个按钮的点击我要向下滚动并使第一个图形生成动画。
点击第二个按钮我想再次向下滚动，隐藏第一个图形，然后为第二个图形设置动画。
我遇到的问题是这两个图表只会动画第一次点击按钮的动画，我怎样才能让它们在每次单击按钮时都动起来？
我遇到的另一个问题是，当您上下滚动时，图表上方的标签闪烁。我如何防止它们闪烁？对于我正在使用的滚动动作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。