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

Спасибо за преимущество за помощь.

Мне было дано задание: "Создать функцию 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 ответа

Решение

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

Источник

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>

Источник
Другие вопросы по тегам