0

Необходимо реализовать анимацию движения указателя на JS.

(без привязки к css классам анимации)

window.onload = function() {
  var btnStart = $(".btn_start"),
      pointer = $(".bl_drum__pointer");

  btnStart.on("click", function() {
    pointer.animate({
      transform: 'translateX(-50%) translateY(-50px)'
    }, 300);
  })
}
body {
  margin: 0;
  padding: 0;
}

.btn_start {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-right: 1px solid #000;
  cursor: pointer;
  background-color: background;
}

.bl_drum__full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37vw;
  height: 37vw;
  z-index: 5;
}

.bl_drum__pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10%;
  height: 10%;
  transform: translateX(-50%) translateY(0);
  z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bl_drum__full">
  <div class="bl_drum__pointer">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.5 116" style="enable-background:new 0 0 116.5 116;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#00B51E;}
	.st1{fill:#FFDA00;}
	.st2{opacity:0.2;fill:url(#SVGID_1_);enable-background:new    ;}
</style>
<g>
	<g>
		<polygon class="st0" points="104.9,20.2 76.9,85.5 58.3,104.2 39.5,85.5 11.6,20.2 11.6,1.5 104.9,1.5 		"/>
	</g>
</g>
<polygon class="st1" points="55.6,74.8 32.1,20.2 84.9,20.2 61.4,74.8 58.5,77.8 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="58.5" y1="651.5" x2="58.5" y2="754.2" gradientTransform="matrix(1 0 0 1 0 -650)">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<path class="st2" d="M11.8,1.5v18.7l28,65.3l18.7,18.7l18.7-18.7l28-65.3V1.5H11.8z M100.5,19.2L73.2,82.8L58.5,97.6L43.8,82.8
	L16.5,19.2v-13h84V19.2z"/>
</svg>

  </div>
</div>

<button class="btn_start" type="button"></button>

Не могу понять, что я делаю не так? Почему анимация вообще не срабатывает. По идее за 1,5 секунды курсор сначала поднимается вверх на -150рх потом спускается до -50рх и потом резко до -200px, там замирает . Можно ли это сделать на jquery без сторонних библиотек? Анимация происходит по нажатию на кнопку.

1 ответ 1

2
  1. Боюсь, что изначально к разработке подошли не правильно. SVG - это целый отдельный объект и даже отдельная страница, которую просто так не вставить в код. Попробуйте вынести весь код тега SVG, сохранить его и подключить к странице с помощью, например: Подробнее написано тут. Внизу страницы есть интересные ссылки на более подробный материал по SVG.
  2. Не весь JS доступен в SVG. Там свои обработчики.
  3. Анимация в jQuery хорошо работает. Вопрос, на сколько правильно все сделать.

$(document).ready(function(){

  $(".btn_start").on("click", function() { 
    $(".bl_drum__pointer").animate({
      "left": "50px", "top": "100px"
    }, 1000);
  });

});
body {
  margin: 0;
  padding: 0;
}

.btn_start {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-right: 1px solid #000;
  cursor: pointer;
  background-color: background;
}

.bl_drum__full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37vw;
  height: 37vw;
  z-index: 5;
  /* border: 1px solid green; */
}

.bl_drum__pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10%;
  height: 10%;
  transform: translateX(-50%) translateY(0);
  z-index: 8;
  border: 1px solid blue;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bl_drum__full">
  <div class="bl_drum__pointer">
    1
  </div>
</div>

<button class="btn_start" type="button"></button>

Если потребуется сделать несколько действий, можете воспользоваться callback-функцией метода animate():

  $(".btn_start").on("click", function() { 
    $(".bl_drum__pointer").animate({
          "left": "50px",
          "top": "50px"
        }, 1000, "", function(){
        $(this).animate({
          "left": "100px",
          "top":"100px"
        }, 500)
    });
  });
  1. Transform метод больше относится к CSS и такого метода в самом jQuery пока не встречал, скорее всего его нет. Если нужно воспользоваться методом Transform, используйте для этого метод .css():

$(document).ready(function(){

  $(".btn_start").on("click", function() { 
    $(".bl_drum__pointer").css({
    		"-moz-transform"   : "translateX(-50%) translateY(50px)",
        "-ms-transform"    : "translateX(-50%) translateY(50px)",
      	"-webkit-transform": "translateX(-50%) translateY(50px)",
        "-o-transform"	   : "translateX(-50%) translateY(50px)",
    		"transform"				 : "translateX(-50%) translateY(50px)"
      });
  });

});
body {
  margin: 0;
  padding: 0;
}

.btn_start {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-right: 1px solid #000;
  cursor: pointer;
  background-color: background;
}

.bl_drum__full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37vw;
  height: 37vw;
  z-index: 5;
  /* border: 1px solid green; */
}

.bl_drum__pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10%;
  height: 10%;
  transform: translateX(-50%) translateY(0);
  z-index: 8;
  border: 1px solid blue;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bl_drum__full">
  <div class="bl_drum__pointer">
    1
  </div>
</div>

<button class="btn_start" type="button"></button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.