关于单个div的多个jquery动画功能的用法

问题描述

从jquery动画文档中，我找到了一个示例示例，其中多个animate函数用于单个div.

from jquery animate doc i found a sample example where multiple animate function is used for single div.

doc url http://api.jquery.com/animate/

这是示例代码

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

在这里我对动画功能有几个疑问

1)为什么排队:假为什么队列是错误的.如果队列为真，结果将是什么

here i have couple of question about animate function

1) why queue: falsewhy queue is false. what would be the result if queue was true

2)在这里使用animate().animate().animate()这样的动画来使用所以所有的动画会并行运行还是一个接一个地运行?

2) here animate use like animate().animate().animate() this wayso all the animate will run parallel or one after one?

推荐答案

1)如果将queue设置为true，则每个动画将在下一个动画运行之前完成.

1) If queue were set to true then each animation would complete before the next one ran.

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

2)好吧queue = false表示它们将一起运行，而queue = true表示它们将一个接一个地运行.

2) Well queue = false means that they will run together, and queue = true means they will run one after another.

您还可以通过一个.animate()调用为多个属性设置动画，如下所示:

Also you can animate several properties with one .animate() call like this:

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

但是，这需要所有动画具有相同的持续时间.这些属性将一次全部动画，而不是一次动画.

But this requires the animations to all have the same duration. These properties will be animated all at once, not one at a time.

这篇关于关于单个div的多个jquery动画功能的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！