Question

所以我一直试图动画这些圈子以扩展压缩，但每次我试图让它们在失败时同时进行。这就是我所拥有的。

＆＃13;

  $(document).ready(function() {
	function myAnimate1(x) {
		$(x)
			.animate({
				top: "150px",
				left: "150px",
				height: "0px",
				width: "0px"
			})
			.animate({
				top: "100px",
				left: "100px",
				height: "100px",
				width: "100px"
			}),
			myAnimate1(x);
	}
    
	function myAnimate2(x) {
		$(x)
			.animate({
				top: "150px",
				left: "150px",
				height: "0px",
				width: "0px"
			})
			.animate({
				top: "0px",
				left: "0px",
				height: "300px",
				width: "300px"
			}),
			myAnimate2(x);
	}
	myAnimate1('.circle1');
	myAnimate2('.circle2');
});

＆＃13;

.circle1 {
	position: absolute;
	top: 150px;
	left: 150px;
	height: 0;
	width: 0;
	background: transparent;
	border: 4px black solid;
	border-radius: 100000000px;
	overflow: hidden;
	display: inline-block;
}

.circle2 {
	position: absolute;
	top: 150px;
	left: 150px;
	height: 0;
	width: 0;
	background: transparent;
	border: 4px black solid;
	border-radius: 100000000px;
	overflow: hidden;
	display: inline-block;
}

＆＃13;

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

＆＃13;

我希望不会移动的元素与另一个div同时扩展。

帮帮我pl0x

Answer 1

您需要在回调函数中调用animate，否则您只是在上一个动画完成之前立即再次调用animate：

.circle1 {
  position: absolute;
  top: 150px;
  left: 150px;
  height: 0;
  width: 0;
  background: transparent;
  border: 4px black solid;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}
.circle2 {
  position: absolute;
  top: 150px;
  left: 150px;
  height: 0;
  width: 0;
  background: transparent;
  border: 4px black solid;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}
body {
  position: relative;
}

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

var focused = true;

window.onfocus = function() {
    focused = true;
};
window.onblur = function() {
    focused = false;
};

Example fiddle

Answer 2

这是带缓动的基本标准代码。

var anim_data1 = { top : "100px", left : "100px" } // anim 1
var anim_data2 = { top : "150px", left : "150px" } // anim 2

// Animate both elements, at the same time:
$(".circle1").stop().animate( anim_data1, 300, "easeOutBounce" );
$(".circle2").stop().animate( anim_data2, 300, "easeOutBounce" );

您的代码可能存在问题：

不要将animate方法包装在附加功能范围内。
解决方案：将您的功能移出$（document）.ready（{...}）范围。

如果以上都没有解决问题，那么在项目中没有正确设置与animate方法无关的其他内容。

只要动画的运行时间设置为0，您也可以使用上一个animate方法的回调。但这会产生问题：

$(ID1).animate( anim_data1, 0, function()
{
    $(ID2).animate( anim_data2, 300 );
});

这将大致同时触发两个动画。

正如您所看到的，这没有多大意义。因为这两个动画至少应该运行一段时间（如300-1000毫秒）。所以它不会同时“动画” - 只有第二个动画才能运行。第一个将很像$（ID1）.css（）方法应用于它。

我想同时为两个对象制作动画，但每次我这样做都会导致我的浏览器崩溃

2 个答案: