Question

来自jquery animate doc我发现了一个示例，其中多个animate函数用于单个div。

这是示例代码

$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
 .animate({ fontSize: "24px" }, 1500 )
 .animate({ borderRightWidth: "15px" }, 1500 );
});

这里有关于动画功能的几个问题

1）为什么队列：false 为什么队列是假的。如果队列为真，那会是什么结果

2）这里使用像animate（）。animate（）。animate（）这样的动画所以所有的动画都将并行或一个接一个地运行？

Answer 1

如果queue选项为false，即使当前正在运行另一个动画，动画也会立即开始（假设队列相同，在您的示例中就是这种情况）。否则，动画将排队，只有在队列中没有任何先前效果时才会运行。

这意味着您的示例动画元素的width属性，而不等待当前动画（如果有）完成，然后等待该动画（如果有的话）完成，然后动画{{ 1}}属性，然后等待该动画完成，最后动画font-size属性。

Answer 2

1）如果queue设置为true，那么每个动画都会在下一个动画运行之前完成。

queue：一个布尔值，指示是否将动画放入效果队列。如果为false，则动画将立即开始。作为在jQuery 1.7中，队列选项也可以接受一个字符串，在这种情况下动画将添加到该字符串表示的队列中。

来源：http://api.jquery.com/animate

2）好queue = false意味着它们会一起运行，queue = true意味着它们会一个接一个地运行。

此外，您可以通过一次.animate()调用为以下几个属性设置动画：

$( "#go1" ).click(function(){
    $( "#block1" ).animate({
        width            : "90%",
        fontSize         : "24px",
        borderRightWidth : "15px"
    }, { queue: false, duration: 3000 });
});

但这需要动画才能拥有相同的持续时间。这些属性将一次动画，而不是一次动画。

关于单个div的多个jquery animate函数的使用

这里有关于动画功能的几个问题

2 个答案: