Ich habe zwei Grafiken, die ich auf einen Klick am Animieren:JQuery auf Schaltfläche anklickt, nach unten scrollen und animieren Graph mit Wegpunkten
http://codepen.io/anon/pen/oLwGWq
Also im Grunde auf Klick auf den ersten Knopf Ich möchte Scrollen Sie nach unten und lassen Sie das erste Diagramm animieren.
Mit einem Klick auf die zweite Schaltfläche möchte ich noch einmal nach unten scrollen, das erste Diagramm ausblenden und dann das zweite Diagramm animieren.
Das Problem, das ich habe, ist, dass beide Diagramme nur das erste Mal animieren, wenn Sie auf die Schaltfläche klicken. Wie kann ich sie animieren, jedes Mal, wenn eine Schaltfläche geklickt wird?
Das andere Problem, das ich habe, ist die Beschriftungen über dem Diagramm flackern, wenn Sie nach oben und unten scrollen. Wie kann ich verhindern, dass sie flackern? Für die Scroll-Aktion verwende ich Waypoints.
Sie können meinen vollständigen Code auf dem oben CodePen Link, hier ist mein js sehen:
$('#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%' });
});
});
});
});
Ich bin auch sicher, dass es ein viel, viel einfacher und sauberer Weg, um diese Grafiken zu animieren andere als Verzögerung verwendet wird, aber ich muss noch viel über JS lernen.