Question

感谢您的帮助。

我被赋予了一项任务： “创建一个包含链接效果的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/

非常感谢您的帮助。

Answer 1

将var counter = 0;移到function changecolors()之外。现在，每次您调用changecolors()时，都将其设置回0。

Answer 2

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>

难以创建Jquery循环来反复更改背景颜色和动画元素

2 个答案: