와 그래프 애니메이션 : 첫 번째 버튼의 클릭에 그래서 기본적으로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에 대해 배울 점이 많다. 관심의