Как сделать две анимации одновременно в JQuery?

Я попытался сделать две анимации в один и тот же момент в 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>

Я бы предположил, что это проблема продолжительности. если у первого, например, 1000, а у следующего 100, то последний будет запущен первым. И тогда у вас также есть setTimeout, который займет дополнительное время

— 19.06.2019 21:31

@Ален. Toma В функции animateDotPos() анимаций 300

— 19.06.2019 21:33

jquery animation

19.06.2019 21:27

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Пожалуйста, отредактируйте ответ, чтобы объяснить, что было не так и как вы это исправили.

— 19.06.2019 21:51

19.06.2019 21:38