Форум

Black_Star · #1 (**permalink**) 19.10.2016, 14:21

Добрый день уважаемые. Столкнулся с вопросом, как зациклить анимацию, если функция находиться в условии if.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<style type="text/css">
		#field {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: red;
		}

		.square {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: black;
			border: 1px solid white;
			color: white;
			font-size: 1.5em;
			text-align: center;
			cursor: pointer;
		}

		.square:nth-child(1) {
			top: 20%;
			left: 20%;
		} 

		.square:nth-child(2) {
			top: 40%;
			left: 20%;
		}
		.square:nth-child(3) {
			top: 60%;
			left: 20%;
		}
		.square:nth-child(4) {
			top: 80%;
			left: 20%;
		}
		#button {
			width: 300px;
			height: 100%;
			background-color: green;
			cursor: pointer;
			font-size: 1.5em;
			color: white;
		}
	</style>

	
</head>
<body>
	<div id="field">
		<div class="square">1</div>
		<div class="square">2</div>
		<div class="square">3</div>
		<div class="square">4</div>
	</div>
	
	<div id="button">Clear function</div>


	<script type="text/javascript">

	window.onload = function() {

	var newDiv = $('#field > div');


  
	// alert('vse ok');

	$('#field').on('click', 'div', function() {

		$(this).addClass('circle');
		move();

	});



	$('#button').on('click', function() {

	  newDiv.removeClass('circle');	

    newDiv.eq(0).css({'top':'',
                      'left':''});
    newDiv.eq(1).css({'top':'',
                      'left':''});
    newDiv.eq(2).css({'top':'',
                      'left':''});
    newDiv.eq(3).css({'top':'',
                      'left':''});
 
	})



 function move() {

 		
 		    newDiv.eq(0).css({'top':'15%',
                          'left':'25%'});

        newDiv.eq(1).css({'top':'15%',
                          'left':'57%'});

        newDiv.eq(2).css({'top':'65%',
                          'left':'57%'});

        newDiv.eq(3).css({'top':'65%',
                          'left':'25%'});

 }


function moveForward() {

 if ( $('#field > div').hasClass('circle') !== true  ) {

  newDiv.animate({left: "+=10%" }, 1000);
  newDiv.animate({left: "-=10%" }, 2000);

} else {

  // Тут должно происходить вращение квадратиков по кругу =)

}

} moveForward();

}

		
	</script>
</body>
</html>

По задумке квадратики должны ездить туда-сюда пока к ним не добавится класс circle /
После нажатия они меняют свое положение и начинают вертеться по кругу относительно пересечения диагонали их расположения (ну или как-то так, вообщем оно должно синхронно и красиво )
(эффект тоже длиться постоянно пока у квадратиков есть класс .circle)

Я честно говоря не придумал какое смещение им надо давать , что б они двигались синхронно по кругу)

И ещё вопрос. почему если нажав на див (добавить ему класс circle) до того момента как проиграется (<3сек) анимация, они так не хорошо изменяют свое положение ?

laimas · #2 (**permalink**) 19.10.2016, 14:32

function name() {
   $('selector').animate(...., function() {
       name()
   );
}
name();

Или в параметре step проверяя условие, останавливать анимацию запуская ее вновь с новыми параметрами.

Black_Star · #3 (**permalink**) 19.10.2016, 15:45

Сообщение от laimas

function name() {
   $('selector').animate(...., function() {
       name()
   );
}
name();

Или в параметре step проверяя условие, останавливать анимацию запуская ее вновь с новыми параметрами.

Ок. Спасибо с callback - вроде разобрался. Но вопросы всё ещё остались.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<style type="text/css">
		#field {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: red;
		}

		.square {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: black;
			border: 1px solid white;
			color: white;
			font-size: 1.5em;
			text-align: center;
			cursor: pointer;
		}

		.square:nth-child(1) {
			top: 20%;
			left: 20%;
		} 

		.square:nth-child(2) {
			top: 40%;
			left: 20%;
		}
		.square:nth-child(3) {
			top: 60%;
			left: 20%;
		}
		.square:nth-child(4) {
			top: 80%;
			left: 20%;
		}
		#button {
			width: 300px;
			height: 100%;
			background-color: green;
			cursor: pointer;
			font-size: 1.5em;
			color: white;
		}
	</style>

	
</head>
<body>
	<div id="field">
		<div class="square">1</div>
		<div class="square">2</div>
		<div class="square">3</div>
		<div class="square">4</div>
	</div>
	
	<div id="button">Clear function</div>


	<script type="text/javascript" >

window.onload = function() {

	var newDiv = $('#field > div');


  
	// alert('vse ok');

	$('#field').on('click', 'div', function() {

		$(this).addClass('circle');
		move();

	});



	$('#button').on('click', function() {

	  newDiv.removeClass('circle');	

    newDiv.eq(0).css({'top':'',
                      'left':''});
    newDiv.eq(1).css({'top':'',
                      'left':''});
    newDiv.eq(2).css({'top':'',
                      'left':''});
    newDiv.eq(3).css({'top':'',
                      'left':''});
 
	})



 function move() {

 		
 		    newDiv.eq(0).css({'top':'15%',
                          'left':'25%'});

        newDiv.eq(1).css({'top':'15%',
                          'left':'57%'});

        newDiv.eq(2).css({'top':'65%',
                          'left':'57%'});

        newDiv.eq(3).css({'top':'65%',
                          'left':'25%'});

 }


function moveFunction() {

 if ( $('#field > div').hasClass('circle') !== true  ) {

  function moveForward() { 

     newDiv.animate({left: "+=10%" }, 1000);
     newDiv.animate({left: "-=10%" }, 2000, moveForward );

         
  }  moveForward();

 

} else {

  // Тут должно происходить вращение квадратиков по кругу =)

}

} moveFunction();

  

}


	</script>
</body>
</html>

1) Почему при добавления класса circle moveFunction() продолжает анимироватся и почему смещение дивов выходит такое кривое ?
2) как быть с анимацией дивов по кругу ?

laimas · #4 (**permalink**) 19.10.2016, 17:01

Сообщение от Black_Star

Почему при добавления класса circle moveFunction() продолжает анимироватся и почему смещение дивов выходит такое кривое ?

Ну во-первых метод .hasClass() кроме true/false ничего не возвращает, даже если элементов не будет этот метод вернет false. Поэтому строгая проверка !== true это лишнее, достаточно if (!$('#field > div').hasClass('circle')).

Во-вторых метод проверяется при запуске анимации, а что там кнопка щелкнулась анимация не подозревает, а вы ее не прекращаете. Нужно либо так:

$('#button').on('click', function() {
      newDiv.css({})
            .removeClass('circle')
            .stop(); //остановили текущие анимации объектов
});

Либо, как говорилось ранее, можно в каждом шаге анимации проверять некое состояние.

Сами анимации можно записать так

newDiv.animate({left: "+=10%", }, 1000)
      .animate({left: "-=10%" }, 2000, moveForward );

Криво это "дергает"? О плавности анимации почитать можно, например http://easings.net/ru.

Сообщение от Black_Star

как быть с анимацией дивов по кругу ?

Задать таковую - сдвигаем вправо, по ее окончании вниз, по ее окончании влево и т.д.

newDiv.animate({left: "+=10%", }, 1000)
        .animate({top: "+=10%", }, 1000)
        .animate({left: "-=10%" }, 1000)
        .animate({top: "-=10%", }, 1000, moveForward );

Но опять таки, пропишите так как я сказал, пощелкайте.... есть странности да? А все почему? Нет логики управления этим хозяйством.

Форум

Справочник

Discord чат

Курсы javascript