如何制作新动画，等到旧动画完成后才会生效？

Question

好的，我的网页上有一些动画按钮。每当你将鼠标悬停在一个按钮上时，另一个按钮缩小，而你所覆盖的按钮会变大。当你过快地切换按钮时，它会混淆尺寸。我需要想办法让下一个按钮上的动画等待，直到所有按钮的大小恢复正常。有什么帮助吗？

相关代码：

$(document).ready(function() {
	$("#box1").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box1").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '+=10px'
		}, {queue: false });
	});
	$("#box1").click(function() {
		$(this).toggle(1000);
	});
	$("#box2").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box2").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '+=10px'
		}, {queue: false });
	});
	$("#box2").click(function() {
		$(this).toggle(1000);
	});
	$("#box3").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box3").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '+=10px'
		}, {queue: false });
	   $("#box6").animate({
		   width: '+=10px'
		}, {queue: false });
	});
	$("#box3").click(function() {
		$(this).toggle(1000);
	});
	$("#box4").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box4").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '+=10px'
		}, {queue: false });
	});
	$("#box4").click(function() {
		$(this).toggle(1000);
	});
	$("#box5").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box5").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box6").animate({
			width: '+=10px'
		}, {queue: false });
	});
	$("#box5").click(function() {
		$(this).toggle(1000);
	});
	$("#box6").mouseenter(function() {
		$(this).animate({
			height: '+=10px'
		}, {queue: false });
		$(this).animate({
			width: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '-=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '-=10px'
		}, {queue: false });
	});
	$("#box6").mouseleave(function() {
		$(this).animate({
			height: '-=10px'
		}, {queue: false });
		$(this).animate({
			width: '-=10px'
		}, {queue: false });
		$("#box1").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box1").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box2").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box3").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box4").animate({
			width: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			height: '+=10px'
		}, {queue: false });
		$("#box5").animate({
			width: '+=10px'
		}, {queue: false });
	});
	$("#box6").click(function() {
		$(this).toggle(1000);
	});
});

Answer 1

这里有很多代码。您应该使用id，而不是class。这使您可以概括代码。你可以在几行内完成所有这些工作。

不要等待动画完成，只需使用.stop(true, true)强制它们结束。第一个true清除元素上剩余的任何动画，第二个true将元素置于动画结尾处的状态。

＆＃13;

＆＃13;

$(".box").mouseenter(function() {
  $(this).stop(true, true).animate({
    height: '+=10px'
  })
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px'
  })
});

$(".box").click(function() {
  $(this).toggle(1000);
});

＆＃13;

.box {
  background-color: green;
  width: 100px;
  height: 30px;
  margin: 2px;
}

＆＃13;

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

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

杰夫B的回答可能是最简单的方法。这是一个完整的工作示例，它基于该解决方案，包括按钮缩小效果，并展示如何使用添加和删除类来帮助选择其他框：Solution JSFiddle。

$(".box").mouseenter(function() {
  $(this).stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $(this).removeClass('unselected');
  $('.unselected').stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  });
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px',
    width: '-=10px'
  })
  $('.unselected').stop(true, true).animate({
    height: '+=10px',
    width: '+=10px'
  });
  $(this).addClass('unselected');
});

$(".box").click(function() {
  $(this).toggle(1000);
});

.box {
  background-color: green;
  width: 100px;
  height: 30px;
}
.container {
  height: 50px;
  margin: 10px;
}

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

注意事项：

• 我在.animate的同一次调用中更改了宽度和高度。该 .animate的参数是object（键/值对），所以只是 包括其他键/值对。
• 添加了容器，因此按钮将保留在一个位置。
• unselected类默认情况下直接在HTML中添加到所有按钮，但如果您愿意，可以在页面加载时使用javascript添加它。
• 我在unselected上删除了mouseenter课程，以便我们可以选择执行拥有unselected的所有框（因为我们不会包含当前的.animate刚删除它）并同时在整个组上调用unselected。
• 然后在mouseleave 上重新添加.animate课程在所有当前unselected上调用box（所有其他< / em> boxes）将它们设置为正常大小。
• 您现在可以根据需要添加更多box es，只要它们具有unselected和unselected类，它就可以正常运行而无需编写任何新内容码。

不是将mouseenter类放在所有内容上，然后在活动元素上删除/重新添加它，而是可以在selected上的活动元素上添加一个类（例如$('.box').not('.selected') }）然后用$(".box").mouseenter(function() { $(this).addClass('selected'); $(this).stop(true, true).animate({ height: '+=10px', width: '+=10px' }); $('.box').not('.selected').stop(true, true).animate({ height: '-=10px', width: '-=10px' }); }).mouseleave(function() { $(this).stop(true, true).animate({ height: '-=10px', width: '-=10px' }) $('.box').not('.selected').stop(true, true).animate({ height: '+=10px', width: '+=10px' }); $(this).removeClass('selected'); }); $(".box").click(function() { $(this).toggle(1000); });选择所有其他框。这是一个例子：

.box {
  background-color: green;
  width: 100px;
  height: 30px;
}
.container {
  height: 50px;
  margin: 10px;
}

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

function customFilter(v) {
  return (v.indexOf('c') === 0);
}

function filterValuesByKeys(obj, filter) {
  var ary = [],
      keys = Object.keys(obj);
  keys.forEach(function(k) {
    if (filter(k)) {
      ary.push(obj[k]);
    }
  })
  return ary;
}

var person = {
  name: 'George',
  age: 50,
  address: '1 center st',
  city: 'some city',
  state: 'some state',
  country: 'USA'
};

var result = filterValuesByKeys(person, customFilter);

console.log(result);