Question

我试图在JQuery中同时制作两个动画，但是最后我运行了第二个动画。

更准确地说，这

 animateDotPos();

写在下面的一个之前，

$('html,body').animate({
    scrollTop: $('h1[name ='+GetaName[1]+']').offset().top
}, {duration: 1000, queue: false});

谁能解释我为什么会这样？

var current;
var speed = 100;
var canGetPos = true;

$(document).ready(function() {
  var i;
  for (i = 1; i <= 6; i++) {
    $('#dot' + i).on('click', function() {
      canGetPos = false;

      animateDotPos();

      var GetaName = $(this).attr('href').split('#');
      $('html,body').animate({
        scrollTop: $('h1[name =' + GetaName[1] + ']').offset().top
      }, {
        duration: 1000,
        queue: false
      });

      setTimeout(function() {
        canGetPos = true;
      }, 1000);
    });
  }

  $('.right-box-filler').height($(document).height());

  locateScroll();
  initialDotPos();

  $(window).scroll(function() {
    if (canGetPos) {
      animateDotPos(null, speed);
    }
  });
});

function animateDotPos() {
  var dist;
  var previous = current;
  var speedness;

  locateScroll();

  if (previous < current) {

    dist = $('#dotdiv' + current).position().top -
      $('#dotblue').position().top +
      $('#dotdiv1').height();

    speedness = speed * (current - previous);

    $('#dotblue').animate({
      height: dist + "px"
    }, {
      duration: speedness,
      queue: false
    }).show();

    setTimeout(function() {
      $('#dotblue').animate({
        height: $('#dotdiv1').height() + "px"
      }, {
        duration: speedness,
        queue: false
      });

      $('#dotblue').animate({
        top: $('#dotdiv' + current).position().top + "px"
      }, {
        duration: speedness,
        queue: false
      });
    }, speedness);

  } else if (previous > current) {

    dist = $('#dotblue').position().top -
      $('#dotdiv' + current).position().top +
      $('#dotdiv1').height();

    speedness = speed * (previous - current);

    $('#dotblue').animate({
      height: dist + "px"
    }, {
      duration: speedness,
      queue: false
    }).show();

    $('#dotblue').animate({
      top: $('#dotdiv' + current).position().top + "px"
    }, {
      duration: speedness,
      queue: false
    });

    setTimeout(function() {
      $('#dotblue').animate({
        height: $('#dotdiv1').height() + "px"
      }, {
        duration: speedness,
        queue: false
      });
    }, speedness);
  }
}

function locateScroll() {
  var i, temp;
  for (i = 1; i <= 6; i++) {
    if (document.documentElement.scrollTop >= $('#t' + i).position().top) {
      temp = i;
    }
  }
  current = temp;
  return temp;
}

function initialDotPos() {
  $('#dotblue').css({
    top: $('#dotdiv' + current).position().top + "px",
    left: $('#dotdiv' + current).position().left + "px",
    collision: 'fit'
  }).show();
}

@charset "utf-8";
:root {
  --side-dot: 10px;
}

body {
  font-size: 50px;
}

.page {
  width: 60vw;
}

.right-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.right-box-filler {
  float: right;
  width: 35px;
  overflow-y: hidden;
}

.dots-box {
  vertical-align: middle;
  width: 30px;
}

.dot-gray {
  float: right;
  margin: 5px;
  width: var(--side-dot);
  height: var(--side-dot);
  border-style: solid;
  border-width: 0;
  border-radius: var(--side-dot);
  background-color: #C3C3C3;
}

.dot-gray:hover {
  cursor: pointer;
}

.dot-blue {
  height: var(--side-dot);
  width: var(--side-dot);
  z-index: 1;
  position: absolute;
  float: right;
  margin: 5px;
  border-style: solid;
  border-width: 0;
  border-radius: var(--side-dot);
  background-color: #003BF9;
}

<!doctype html>
<html lang="it">

<head>
  <!-- Some Metas... -->
  <meta name="viewport" content="width=device-width">
  <meta charset="utf-8">
  <title>Documento senza titolo</title>

  <!-- CSS -->
  <link href="side-menu.css" rel="stylesheet" type="text/css" />

  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="scroll.js"></script>
</head>

<body>
  <div class="right-box-filler"></div>
  <div class="right-box">
    <div class="dots-box">
      <a id="dot1" href="#t1">
        <div id="dotdiv1" class="dot-gray"></div>
      </a>
      <a id="dot2" href="#t2">
        <div id="dotdiv2" class="dot-gray"></div>
      </a>
      <a id="dot3" href="#t3">
        <div id="dotdiv3" class="dot-gray"></div>
      </a>
      <a id="dot4" href="#t4">
        <div id="dotdiv4" class="dot-gray"></div>
      </a>
      <a id="dot5" href="#t5">
        <div id="dotdiv5" class="dot-gray"></div>
      </a>
      <a id="dot6" href="#t6">
        <div id="dotdiv6" class="dot-gray"></div>
      </a>
      <div id="dotblue" class="dot-blue"></div>
    </div>
  </div>

  <center>
    <div class="page">
      <h1 name="t1" id="t1">Title 1</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

      <h1 name="t2" id="t2">Title 2</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

      <h1 name="t3" id="t3">Title 3</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

      <h1 name="t4" id="t4">Title 4</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

      <h1 name="t5" id="t5">Title 5</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

      <h1 name="t6" id="t6">Title 6</h1>
      Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </center>
</body>

</html>

Answer 1

尝试此方法

引用：https://jsfiddle.net/85mh9wx6/

<script>
var current = 1;
var speed = 100;
var previous = 1;
var canGetPos = true;

$(document).ready(function(){
    var i;
    for(i = 1; i <= 6; i++) {
        $('#dot' + i).attr("setIndex",i).on('click', function() {
            canGetPos = false;
            previous = current;
      current = $(this).attr("setIndex");

            var GetaName = $(this).attr('href').split('#');
            $('html,body').animate({
                scrollTop: $('h1[name ='+GetaName[1]+']').offset().top
            }, {duration: 1000, queue: false});

            animateDotPos(null, speed);
        });
    }

    $('.right-box-filler').height($(document).height());

    initialDotPos();

});

function animateDotPos() {
    var dist;
    var speedness;


    if(previous < current) {

        dist = $('#dotdiv' + current).position().top
            - $('#dotblue').position().top
            + $('#dotdiv1').height();

        speedness = speed * (current - previous);

        $('#dotblue').animate({
            height:     dist + "px"
        }, {duration: speedness, queue: false}).show();

        setTimeout(function() {
            $('#dotblue').animate({
                height:     $('#dotdiv1').height() + "px"
            }, {duration: speedness, queue: false});

            $('#dotblue').animate({
                top:        $('#dotdiv' + current).position().top + "px"
            }, {duration: speedness, queue: false});
        }, speedness);

    } else if(previous > current) {

        dist = $('#dotblue').position().top
            - $('#dotdiv' + current).position().top
            + $('#dotdiv1').height();

        speedness = speed * (previous - current);

        $('#dotblue').animate({
            height:     dist + "px"
        }, {duration: speedness, queue: false}).show();

        $('#dotblue').animate({
            top:        $('#dotdiv' + current).position().top + "px"
        }, {duration: speedness, queue: false});

        setTimeout(function() {
            $('#dotblue').animate({
                height:     $('#dotdiv1').height() + "px"
            }, {duration: speedness, queue: false});
        }, speedness);
    }
}


function initialDotPos() {
    $('#dotblue').css({
        top:        $('#dotdiv' + current).position().top + "px",
        left:       $('#dotdiv' + current).position().left + "px",
        collision:  'fit'
    }).show();
}
</script>

如何在JQuery中同时制作两个动画？

1 个答案: