为什么这两个排队的动画从未被执行过？
为什么这两个排队的动画从未被执行过？
提问于 2017-07-20 05:18:01
根据下面的代码，在第一个动画的回调函数中有一个字体大小的动画.它应该在第一个动画完成时执行。实际上，字体大小的动画是在第一个动画完成后执行的.通常，一个排队的动画应该在某个动画完成后执行，而之前的动画的回调函数也应该同时执行。但在这种情况下，为什么两个排队动画从未被执行？(排队动画被完全删除)是因为字体大小动画的.stop(true)函数吗？理由是什么呢？执行过程是什么？
$(document).ready(function(){
$("div").animate({height: "300px"},3000,"linear",function(){
$(this).stop(true).animate({fontSize: "50px"},3000,"linear");
}); //The first animation
$("div").animate({height: "50px"},3000,"linear"); //The queued animation
$("div").animate({width: "200px"},3000,"linear"); //The queued animation
});div{
font-size: 20px;
text-align: center;
background-color: #F00;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello world!</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-20 05:22:04
要以与第一个动画相同的样式对它们进行排队，需要将它们作为回调传递：
$(document).ready(function(){
$("div").animate({height: "300px"},3000,"linear",function(){
$(this).animate({fontSize: "50px"},3000,"linear", function() {
$("div").animate({height: "50px"},3000,"linear"); //The queued animation
$("div").animate({width: "200px"},3000,"linear"); //The queued animation
});
}); //The first animation
});div{
font-size: 20px;
text-align: center;
background-color: #F00;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello world!</div>
Stack Overflow用户
发布于 2017-07-20 05:22:56
在每个动画的回调动画中添加那些排队的动画
$(document).ready(function() {
$("div").animate({
height: "300px"
}, 3000, "linear", function() {
$(this).stop(true).animate({
fontSize: "50px"
}, 3000, "linear", function() {
$("div").animate({
height: "50px"
}, 3000, "linear", function() {
$("div").animate({
width: "200px"
}, 3000, "linear"); //The queued animation
}); //The queued animation
});
}); //The first animation
});div {
font-size: 20px;
text-align: center;
background-color: #F00;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello world!</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45205744
复制相关文章
相似问题
腾讯云开发者
