JQuery点击按钮，向下滚动并使用Waypoints动画图形

Question

我有两张图表，我点击按钮即可动画：

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的知识。

Answer 1

您感兴趣的点有以下两个功能：

$("#graph1").click(function (){

和

$("#graph2").click(function (){

您需要做的第一个操作是重置动画的效果，然后您可以继续使用您的代码，否则在连续点击后您将获得不需要的结果。

我的片段（查找我的评论“//重置animatoin效果......”）：

$(function () {
  $('#q-graph').css('opacity', 0);
  $('.label, .label2').hide();
  $(document).ready(function(){
    $('#q2-fade').hide();
    //navigation functionality
    $("#graph1").click(function (){
      // reset the animatoin effects......
      $('#q-graph').removeClass('animated fadeIn');
      $("#q-graph td#one").css({height:"0%"});
      $("#q-graph td#two").css({height:"0%"});
      $("#q-graph td#three").css({height:"0%"});
      $("#q-graph td#four").css({height:"0%"});
      $("#q-graph td#five").css({height:"0%"});
      $("#q-graph td#six").css({height:"0%"});
      $("#q-graph td#seven").css({height:"0%"});
      $("#q-graph td#eight").css({height:"0%"});
      $("#q-graph td#nine").css({height:"0%"});
      $("#q-graph td#ten").css({height:"0%"});
      $("#q-graph td#eleven").css({height:"0%"});
      $("#q-graph td#twelve").css({height:"0%"});
      $("#q-graph td#thirteen").css({height:"0%"});
      $("#q-graph td#fourteen").css({height:"0%"});
      $("#q-graph td#fifteen").css({height:"0%"});
      $("#q-graph td#sixteen").css({height:"0%"});
      // reset the animatoin effects......ENDS


      $('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();
      $('#q2-fade').show();
      $('#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 (){
      // reset the animatoin effects......
      $('#q2-graph').removeClass('animated fadeIn');
      $("#q2-graph td#one").css({height:"0%"});
      $("#q2-graph td#two").css({height:"0%"});
      $("#q2-graph td#three").css({height:"0%"});
      $("#q2-graph td#four").css({height:"0%"});
      $("#q2-graph td#five").css({height:"0%"});
      $("#q2-graph td#six").css({height:"0%"});
      // reset the animatoin effects......ENDS



      $('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%' });
        });

      });
    });
  });
});

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: aliceblue;
}
.label, .label2{
  color: #333333 !important;
}
#intro{
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  text-align:center;
  color: #333333 !important;
  width:100%;
  min-height:10em;
  margin:0;
  padding-top:10px;
}
button{
  padding: 1em 2em;
  font-family: 'Montserrat',sans-serif;
  color: #ffffff !important;
  font-size: 1em;
  border:0;
  background: rgba(0,0,0,0.9);
}
button:hover{
  background: rgba(0,0,0,0.7);
}
#q-graph {
  display: block;
  /* fixes layout wonkiness in FF1.5 */
  position: relative;
  width: 850px;
  height: 404px;
  margin: 1.1em 0 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: transparent;
  font-size: 11px;
  z-index: 3;
  color: #333333;
  font-family: 'Montserrat',sans-serif;
}
#q-graph tr, #q-graph th, #q-graph td {
  position: absolute;
  bottom: 0;
  width: 105px;
  z-index: 2;
  margin: 0;
  padding: 0;
  color:#333333;
  text-align: center;
}

#q-graph td {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

#q-graph thead tr {
  left: 100%;
  top: 50%;
  bottom: auto;
  margin: -2.5em 0 0 5em;
}

#q-graph thead th {
  width: 7.5em;
  height: auto;
  padding: 0.5em 1em;
}

#q-graph thead th.sent {
  top: 0;
  left: 0;
  line-height: 2;
}

#q-graph thead th.paid {
  top: 2.75em;
  line-height: 2;
  left: 0;
}

#q-graph tbody tr {
  height: 100%;
  padding-top: 2px;
  color: #333333;
}

#q-graph #q1 {
  left: 0;
}

#q-graph #q2 {
  left: 50px;
}

#q-graph #q3 {
  left: 100px;
}

#q-graph #q4 {
  left: 150px;
  border-right: none;
}
#q-graph #q5 {
  left: 200px;
  border-right: none;
}
#q-graph #q6 {
  left: 250px;
  border-right: none;
}
#q-graph #q7 {
  left: 300px;
  border-right: none;
}
#q-graph #q8 {
  left: 350px;
  border-right: none;
}
#q-graph #q9 {
  left: 400px;
  border-right: none;
}
#q-graph #q10 {
  left: 450px;
  border-right: none;
}
#q-graph #q11 {
  left: 500px;
  border-right: none;
}
#q-graph #q12 {
  left: 550px;
  border-right: none;
}
#q-graph #q13 {
  left: 600px;
  border-right: none;
}
#q-graph #q14 {
  left: 650px;
  border-right: none;
}
#q-graph #q15 {
  left: 700px;
  border-right: none;
}
#q-graph #q16 {
  left: 750px;
  border-right: none;
}

#q-graph tbody th {
  bottom: -1.75em;
  vertical-align: top;
  font-weight: normal;
  color: #e9d1df;
}

#q-graph .bar {
  width: 30px;
  border-bottom: none;
  color: #333333;
}

#q-graph .bar p {
  display: block;
  margin: 0;
  margin-top: -52px;
  text-align: left;
  width: 63px;
  vertical-align: middle;
  padding: 0;
  -ms-transform: rotate(-90deg) translateY(-20px);
  -moz-transform: rotate(-90deg) translateY(-20px);
  -webkit-transform: rotate(-90deg) translateY(-20px);
  transform: rotate(-90deg) translateY(-20px);
}

#q-graph .sent {
  left: 39px;
  background-color: #746a90;
  border-color: transparent;
}

#q-graph .paid {
  left: 77px;
  background-color: #746a90;
  border-color: transparent;
}
#q-graph .adele{
  background-color: #ff5247 !important;
}

#ticks {
  position: relative;
  top: -404px;
  left: 2px;
  width: 850px;
  height: 450px;
  z-index: 1;
  margin-bottom: -100px;
  font-size: 10px;
  margin-left: auto;
}
.tick{
  height: 45px;
}
#last{
  border-bottom: 0 !important;
}
#first{
  border-top: 1px solid #3e2c38;
}
#ticks .tick {
  position: relative;
  border-bottom: 1px solid #3e2c38;
  width: 850px;
}

#ticks .tick p {
  position: absolute;
  left: -3em;
  top: -0.8em;
  margin: 0 0 0 0.5em;
}
#one{
  max-height: 99.36%;
}
#two{
  max-height: 48.13%;
}
#three{
  max-height: 76.08%;
}
#four{
  max-height: 65.36%;
}
#five{
  max-height: 79.79%;
}
#six{
  max-height: 49.69%;
}
#seven{
  max-height: 37.19%;
}
#eight{
  max-height: 36.99%;
}
#nine{
  max-height: 28.74%
}
#ten{
  max-height: 32.17%
}
#eleven{
  max-height: 34.15%;
}
#twelve{
  max-height: 58.24%;
}
#thirteen{
  max-height: 44.14%;
}
#fourteen{
  max-height: 24.27%;
}
#fifteen{
  max-height: 36.63%;
}
#sixteen{
  max-height: 74.41%;
}
/*Second Graph*/
#q2-graph {
  display: block;
  /* fixes layout wonkiness in FF1.5 */
  position: relative;
  width: 350px;
  height: 370px;
  margin: 1.1em 0 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: transparent;
  font-size: 11px;
  z-index: 3;
}

#q2-graph tr, #q2-graph th, #q2-graph td {
  position: absolute;
  bottom: 0;
  width: 105px;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}

#q2-graph td {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

#q2-graph thead tr {
  left: 100%;
  top: 50%;
  bottom: auto;
  margin: -2.5em 0 0 5em;
}

#q2-graph thead th {
  width: 7.5em;
  height: auto;
  padding: 0.5em 1em;
}

#q2-graph thead th.sent {
  top: 0;
  left: 0;
  line-height: 2;
}

#q2-graph thead th.paid {
  top: 2.75em;
  line-height: 2;
  left: 0;
}

#q2-graph tbody tr {
  height: 100%;
  padding-top: 2px;
  color: #333333;
}

#q2-graph #q1 {
  left: 0;
}

#q2-graph #q2 {
  left: 50px;
}

#q2-graph #q3 {
  left: 100px;
}

#q2-graph #q4 {
  left: 150px;
  border-right: none;
}
#q2-graph #q5 {
  left: 200px;
  border-right: none;
}
#q2-graph #q6 {
  left: 250px;
  border-right: none;
}
#q2-graph tbody th {
  bottom: -1.75em;
  vertical-align: top;
  font-weight: normal;
  color: #333333;
}

#q2-graph .bar {
  width: 30px;
  border-bottom: none;
  color: #333333 !important;
}

#q2-graph .bar p {
  color: #333333 !important;
  display: block;
  margin: 0;
  margin-top: -95px;
  text-align: left;
  width: 150px;
  line-height: 12px;
  padding: 0;
  opacity: 1;
  -ms-transform: rotate(-90deg) translateY(-63px);
  -moz-transform: rotate(-90deg) translateY(-63px);
  -webkit-transform: rotate(-90deg) translateY(-63px);
  transform: rotate(-90deg) translateY(-63px);
}

#q2-graph .sent {
  left: 39px;
  background-color: #746a90;
  border-color: transparent;
}

#q2-graph .paid {
  left: 77px;
  background-color: #746a90;
  border-color: transparent;
}
#q2-graph .adele{
  background-color: #ff5247 !important;
}

#ticks2 {
  position: relative;
  top: -366px;
  left: 35px;
  width: 350px;
  height: 400px;
  z-index: 1;
  margin-bottom: -100px;
  margin-left: auto;
  font-size: 10px;
  margin-left: auto;
  margin-right: auto;
}
.tick2{
  height: 60px;
}
#last{
  border-bottom: 0 !important;
}
#first{
  border-top: 1px solid #3e2c38;
}
#ticks2 .tick2 {
  position: relative;
  border-bottom: 1px solid #3e2c38;
  width: 300px;
}

#ticks2 .tick2 p {
  position: absolute;
  left: -3em;
  top: -0.8em;
  margin: 0 0 0 0.5em;
}
#one{
  max-height: 45.1167%;
}
#two{
  max-height: 67.05%;
}
#three{
  max-height: 56.2333%;
}
#four{
  max-height: 17.1%;
}
#five{
  max-height: 37.7333%;
}
#six{
  max-height: 83.6333%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>


<section id="intro"><button id="graph1">Graph #1</button>
    <button id="graph2">Graph #2</button></section>
<section id="graphs-container">
    <div class="col-lg-10 col-lg-offset-1 text-center" id="q-fade">
        <table id="q-graph">
            <tbody>
            <tr class="qtr" id="q1">
                <th scope="row">00'</th>
                <td class="sent bar" id="one"><p class="label">NSYNC<br>No Strings Attached</p></td>
            </tr>
            <tr class="qtr" id="q2">
                <th scope="row">01'</th>
                <td class="sent bar" id="two"><p class="label">Linkin Park<br>Hybrid Theory</p></td>
            </tr>
            <tr class="qtr" id="q3">
                <th scope="row">02'</th>
                <td class="sent bar" id="three"><p class="label">Eminem<br>The Eminem Show</p></td>
            </tr>
            <tr class="qtr" id="q4">
                <th scope="row">03'</th>
                <td class="sent bar" id="four"><p class="label">50 Cent<br>Get Rich or Die Tryin'</p></td>
            </tr>
            <tr class="qtr" id="q5">
                <th scope="row">04'</th>
                <td class="sent bar" id="five"><p class="label">Usher<br>Confessions</p></td>
            </tr>
            <tr class="qtr" id="q6">
                <th scope="row">05'</th>
                <td class="sent bar" id="six"><p class="label">Mariah Carey<br>The Emancipation of Mimi</p></td>
            </tr>
            <tr class="qtr" id="q7">
                <th scope="row">06'</th>
                <td class="sent bar" id="seven"><p class="label">High School Musical<br>Soundtrack</p></td>
            </tr>
            <tr class="qtr" id="q8">
                <th scope="row">07'</th>
                <td class="sent bar" id="eight"><p class="label">Josh Groban<br>Noel</p></td>
            </tr>
            <tr class="qtr" id="q9">
                <th scope="row">08'</th>
                <td class="sent bar" id="nine"><p class="label">Lil Wayne<br>Tha Carter III</p></td>
            </tr>
            <tr class="qtr" id="q10">
                <th scope="row">09'</th>
                <td class="sent bar" id="ten"><p class="label">Taylor Swift<br>Fearless</p></td>
            </tr>
            <tr class="qtr" id="q11">
                <th scope="row">10'</th>
                <td class="sent bar" id="eleven"><p class="label">Eminem<br>Recovery</p></td>
            </tr>
            <tr class="qtr" id="q12">
                <th scope="row">11'</th>
                <td class="sent bar adele" id="twelve"><p class="label">Adele<br>21</p></td>
            </tr>
            <tr class="qtr" id="q13">
                <th scope="row">12'</th>
                <td class="sent bar adele" id="thirteen"><p class="label">Adele<br>21</p></td>
            </tr>
            <tr class="qtr" id="q14">
                <th scope="row">13'</th>
                <td class="sent bar" id="fourteen"><p class="label">Justin Timberlake<br>20/20 Experience</p></td>
            </tr>
            <tr class="qtr" id="q15">
                <th scope="row">14'</th>
                <td class="sent bar" id="fifteen"><p class="label">Taylor Swift<br>1989</p></td>
            </tr>
            <tr class="qtr" id="q16">
                <th scope="row">15'</th>
                <td class="sent bar adele" id="sixteen"><p class="label">Adele<br>25</p></td>
            </tr>
            </tbody>

        </table>
    </div>
    </div>
    <!--2nd graph-->
    <div class="col-lg-10 col-lg-offset-1 text-center" id="q2-fade">
        <table id="q2-graph">
            <tbody>
            <tr class="qtr2" id="q1">
                <th scope="row">10'</th>
                <td class="sent bar" id="one"><p class="label2">Lady Antebellum<br>Need You Now</p></td>
            </tr>
            <tr class="qtr2" id="q2">
                <th scope="row">11'</th>
                <td class="sent bar" id="two"><p class="label2">Adele<br>21</p></td>
            </tr>
            <tr class="qtr2" id="q3">
                <th scope="row">12'</th>
                <td class="sent bar adele" id="three"><p class="label2">Adele<br>21</p></td>
            </tr>
            <tr class="qtr2" id="q4">
                <th scope="row">13'</th>
                <td class="sent bar" id="four"><p class="label2">Justin Timberlake<br>20/20 Experience</p></td>
            </tr>
            <tr class="qtr2" id="q5">
                <th scope="row">14'</th>
                <td class="sent bar" id="five"><p class="label2">Various Artists<br>Frozen</p></td>
            </tr>
            <tr class="qtr2" id="q6">
                <th scope="row">15'</th>
                <td class="sent bar adele" id="six"><p class="label2">Adele<br>25</p></td>
            </tr>
            </tbody>

        </table>
    </div>
    </div>
</section>