javascript - 单击按钮时的 JQuery，向下滚动并使用 Waypoints 动画图形-6ren

javascript - 单击按钮时的 JQuery，向下滚动并使用 Waypoints 动画图形

转载作者：可可西里更新时间：2023-11-01 13:48:37

我有两个图表，我在点击按钮时制作动画:

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

最佳答案

您的兴趣点在于以下两个函数:

$("#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>

关于javascript - 单击按钮时的 JQuery，向下滚动并使用 Waypoints 动画图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38192173/

文章推荐： javascript - slider 游标不停留在 slider 中

文章推荐： php - 处理 Zend Framework 的 Controller 插件中抛出的异常

文章推荐： php - Zend Framework - 使用 WHERE 和 AND 更新数据库行

文章推荐： javascript - getBoundingClientRect() 导致 javascript 崩溃？

c# - WPF-如何在不使用向上、向下、向左和向右箭头键的情况下设置向上、向下、向左、向右事件？
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设，当前焦点在按钮 5 上。如果我按向上箭头，则焦点将在 2
java - 螺旋穿过二维数组(l-r，向下，r-l，向下，l-r，...)
我正在为蛇和梯子制作一 block 板，到目前为止，我已经按降序打印了板。但是，我需要以正确的方式打印电路板。编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
jQuery 向下/向上滑动和响应式设计
我有一个可以响应式调整大小的菜单，因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列，因此 div 根据窗口大小具有不同的高度。当我使用 jQuery slideDown/
javascript - 向下/向上滚动时显示白屏
我们从服务器获取数据并附加 ListView 。我们的问题是，当向上/向下滚动时，它首先显示白屏，然后显示数据。向下/向上滚动时，之前出现的白屏应删除 for (var i=0; i");
javascript - 向下/向上滚动时导航汉堡图标反复闪烁
我想要一个汉堡图标动态改变颜色的代码，以适应网站的黑色部分/部分和白色。它最初是 3 段白色，js 代码几乎是好的和正确的，但是当它在白色部分时它一直闪烁，并在红色和白色之间闪烁。 js var to
jquery - 单击页脚向上/向下
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css，我有一个可折叠元素(bootstrap 中的 Accordion )，当它折叠时它有一个名为 .accordion-toggle.
css - 向下/向上滑动动画
在此代码段中，使用关键帧和动画并显示无/ block ，div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
Python3如何按一定精度向上(向下)舍入
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入，在 = 0 val *= 10 ** precision r
c++ - 调整文件大小(向下)
我正在尝试就地缩小文件。我正在用另一个文件的内容替换一个文件的内容，完成后我想确保源文件是否小于目标文件，目标文件是否正确收缩。 (为什么:因为dest文件是一个备份，写入media的开销很大，所以
c# - 如何整数除以负数*向下*？
似乎每当我用一个负整数除以一个正整数时，我都需要它向下舍入 (向 -inf)，而不是向 0。但 C# 和 C++ 都向 0 舍入。所以我想我需要一个 DivideDownward() 方法。我可以用
Javascript 按键/向下/向上事件触发顺序
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
java - 如何使recyclerview无限滚动(向下/向上)？
我见过几个recyclerview的无限滚动示例，但它们都是向下滚动的。我想要的是一次又一次地加载我的列表，但无论用户是从上面还是从下面滚动。正常列表向上滚动向下滚动这样可以通过无限滚动一遍
jquery向上/向下 slider 与ajax冲突
我正在使用带有 View 的 drupal 7，并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效，但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时，它似乎不
jquery效果-向下/向上滑动隐藏div，隐藏当前显示的隐藏div
*场景我希望制作一个类似于本网站上的 jquery 效果，它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题我已经开始了，但是用很多方法遇到了一些障
jquery - 如何循环遍历颜色数组以更改按键背景(按下/向下)
互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。我正在尝试创建一个文本区域字段，其中用户每次按下键(a-z)，都会触发背景颜色更改(在数组中列出)。我一直在
javascript - 按住一个键时如何避免多个键向上/向下/按下事件？
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行，以启动机器人，并在 keyup 上进行停止。我的问题是，当按下某个键时，keyup、keydown 和 ke
javascript - 滚动条强制 Div 向下
我在内容容器中有两个 div，一个向左浮动，另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px，右 div 宽度为 625px。有时，在加载页面时，滚动条会更改可用屏幕宽度的宽
css - 向下/向上滚动页面时自动定位 div
请看这个UI sketch图片，我在某个站点的侧边栏(黑框)中有这个 div，当我向下滚动或向上滚动时，我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动，这样它就永远

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击按钮时的 JQuery，向下滚动并使用 Waypoints 动画图形