Как сделать две анимации одновременно в JQuery? - PullRequest
Новая
       2

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

1 голос
/ 19 июня 2019

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

1 Ответ

1 голос
/ 19 июня 2019

Попробуйте этот метод

см .: 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...