Трудность создания цикла Jquery для многократного изменения цвета фона и элемента анимации - PullRequest
Новая
       3

Трудность создания цикла Jquery для многократного изменения цвета фона и элемента анимации

0 голосов
/ 24 января 2019

спасибо за помощь.

Мне было дано задание: «Создать функцию jQuery, которая содержит цепочечный эффект для многократного перемещения всех элементов вашей страницы при одновременном изменении фона».

НЕТ ПРОБЛЕМЫ:

1: Я неоднократно создавал эффект слайда с помощью setInterval.

ПРОБЛЕМА:

1.Не могу заставить работать эффект анимации jqueryперемещение ящиков. 

$(".boxes").animate({right: '500px'}, 1000).animate({left: '500px'}, 1000);

2. Я не могу заставить jquery повторно менять фон на разные цвета. 

function changecolors() {
        var colors = ["blue", "red", "green", "pink"];
        var counter = 0;
        if (counter < colors.length) {
            $("body").css("background-color", colors[counter], 1000);
            console.log("Counter: " + counter + " Colors Length: " + colors.length + " Colors: " + colors);
            counter++;
        } else {
            counter = 0;
        }

3. Мой счетчик не работает и не хочет увеличиваться.

Я пытался заставить его работать в течение последних двух дней и спрашивал других людей, но пока никто не смог мне помочь.

Вот пример ссылки: https://jsfiddle.net/TheWatchman/fb0mt78d/64/

Любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 24 января 2019

var counter = 0; должно быть определено вне функции. 

$(document).ready(function() {
  setInterval(animateBoxes, 4000);
  setInterval(changecolors, 4000);

  function animateBoxes() {

    $(".boxes").animate({right: '500px'}, 1000).animate({left: '500px'}, 1000);
    $(".boxes").slideUp(2000).slideDown(2000);
  }
  animateBoxes();
var counter = 0;
function changecolors() {
		var colors = ["blue", "red", "green", "pink"];
		
		if (counter < colors.length) {
			$("body").css("background-color", colors[counter], 1000);
			console.log("Counter: " + counter + " Colors Length: " + colors.length + " Colors: " + colors);
			counter++;
		} else {
			counter = 0;
		}

		console.log(colors.length);

	}
	changecolors();


});
.box1 {
  width: 120px;
  height: 120px;
  background-color: black;
  color: white;
  text-align:center;
  padding-left
}

.box1 h1{
  padding: 50% 0 50% 0;
}

.box2 {
  width: 180px;
  height: 180px;
  background-color: green;
  text-align:center;
}

.box2 h1{
  padding: 50% 0 50% 0;
}
<!DOCTYPE html>

<html>

  <head>

    <!--Including jQuery -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">


    </script>
    <link rel='stylesheet' type='text/css' href='stylesheet.css' />
    <script type='text/javascript' src="script.js"></script>
    <!-- Including the scripting file -->
  </head>

  <body>
  
  
  
  <div class="boxes">
  
  
    <div class="box1">
      <h1>
        BOX 1
      </h1>
    </div>

    <div class="box2">
      <h1>
        BOX 2
      </h1>
    </div>
    </div>
   
  </body>

</html>
0 голосов
/ 24 января 2019

Перемещение var counter = 0; за пределы function changecolors(). Прямо сейчас каждый раз, когда вы звоните changecolors(), вы устанавливаете его обратно на 0.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...