Question

我想知道是否可以在jQuery .aniamte（）函数中重复相同的属性。例如，如果我有一个绿色方块，我想将其向右移动，然后向下再向右移动。我该怎么做？我尝试再次编写第一个.animate（）函数，但它没有用。

＆＃13;

$(document).ready(function(){
  $("div").animate({left: "100px"}, "slow");
  $("div").animate({top: "100px"}, "slow");
  $("div").animate({left: "100px"}, "slow");
});

＆＃13;

div {
  height: 60px;
  width: 60px;
  background-color: green;
  position: relative;
}

＆＃13;

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

＆＃13;

Answer 1

最简单的方法是使用+=。

$(document).ready(function(){
  $("div").animate({left: "+=100px"}, "slow");
  $("div").animate({top: "100px"}, "slow");
  $("div").animate({left: "+=100px"}, "slow");
});

div {
  height: 60px;
  width: 60px;
  background-color: green;
  position: relative;
}

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

Answer 2

在第一个left: "100px"之后，div已经animate()了，如果你想在下一次迭代中添加额外的100px它应该是left: "+=100px"。

你的意思是：

＆＃13;

$(document).ready(function(){
  $("div").animate({left: "100px"}, "slow");
  $("div").animate({top: "100px"}, "slow");
  $("div").animate({left: "+=100px"}, "slow");
  $("div").animate({top: "+=100px"}, "slow");
});

＆＃13;

div {
  height: 60px;
  width: 60px;
  background-color: green;
  position: relative;
}

＆＃13;

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

＆＃13;

Answer 3

你的广场没有进一步发展，因为它已经left: 100px 如果您希望您的方块进一步移动，则需要向x / y添加更多！

原谅循环是如何基本但是：

  var x = 100;
  var y = 100;
  for(var x=100; x<500; x+=100){
    $('div').animate({left:x+"px"}, 'slow')
            .animate({top:y+"px"}, 'slow');
    y+=100;
  }

jsfiddle

Answer 4

将其包装在递归函数（jsfiddle）中：

function anim(){
	$("div").animate({left: "100px"}, "slow")
    		.animate({top: "100px"}, "slow")
    		.animate({left: 0}, "slow")
                .animate({top: 0 }, "slow", function(){ anim(); });
}

anim();

div {
  height: 60px;
  width: 60px;
  background-color: green;
  position: relative;
}

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

jQuery使用.animate（）重复属性

4 个答案: