JQuery 同步动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1594077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery synchronous animation
提问by Elazar Leibovich
In many cases I wish animation to be executed synchronously. Especially when I wish to make a a series of sequential animations.
在许多情况下，我希望动画同步执行。特别是当我想制作一系列连续动画时。
Is there an easy way to make a jQuery animatefunction call synchronous?
有没有一种简单的方法可以使 jQueryanimate函数调用同步？
The only way I thought about is to set a flag true when the animation has finished and to wait for this flag.
我想到的唯一方法是在动画完成时设置一个标志为真并等待这个标志。
回答by SLaks
jQuery cannot make synchronous animations.
jQuery 无法制作同步动画。
Remember that JavaScript runs on the browser's UI thread.
请记住，JavaScript 在浏览器的 UI 线程上运行。
If you make a synchronous animation, the browser will freeze until the animation finishes.
如果您制作同步动画，浏览器将冻结，直到动画完成。
Why do you need to do this?
为什么需要这样做？
You should probably use jQuery's callback parameter and continue your method code in the callback, like this:
您可能应该使用 jQuery 的回调参数并在回调中继续您的方法代码，如下所示：
function doSomething() {
var thingy = whatever;
//Do things
$('something').animate({ width: 70 }, function() {
//jQuery will call this method after the animation finishes.
//You can continue your code here.
//You can even access variables from the outer function
thingy = thingy.fiddle;
});
}
This is called a closure.
这称为闭包。
回答by Alain BECKER
I think you should take a look at the jQuery queue()method.
我认为你应该看看 jQuery queue()方法。
Not only does queue()'s doc explain jQuery animations don't really block the UI, and actually queues them after one another.
queue() 的文档不仅解释了 jQuery 动画并没有真正阻塞 UI，而且实际上将它们一个接一个地排队。
It also provides with a way to make your animations and function calls sequential (this is my best understanding of what you mean by "synchronous"), like:
它还提供了一种使动画和函数调用顺序化的方法（这是我对“同步”的最佳理解），例如：
$("#myThrobber")
.show("slow") // provide user feedback
.queue( myNotAnimatedMethod ) // do some heavy duty processing
.hide("slow"); // provide user feedback (job's
myNotAnimatedMethod() { // or animated, just whatever you want anyhow...
// do stuff
// ...
// tells #myThrobber's ("this") queue your method "returns",
// and the next method in the queue (the "hide" animation) can be processed
$(this).dequeue();
// do more stuff here that needs not be sequentially done *before* hide()
//
}
This is of course overkill with asynchronous processing; but if your method is actually a plain old synchronous javascript method, that could be the way to do it.
这对于异步处理来说当然是矫枉过正；但如果您的方法实际上是一个普通的旧同步 javascript 方法，那可能就是这样做的方法。
Hope this helps, and sorry for my poor english...
希望这会有所帮助，并为我糟糕的英语感到抱歉......
回答by shuckster
jQuery provides a "step" callback for its .animate() method. You can hook into this to do synchronous animations:
jQuery 为其 .animate() 方法提供了一个“step”回调。您可以使用它来执行同步动画：
jQuery('#blat').animate({
// CSS to change
height: '0px'
},
{
duration: 2000,
step: function _stepCallback(now,opts) {
// Stop browser rounding errors for bounding DOM values (width, height, margin, etc.)
now = opts.now = Math.round(now);
// Manipulate the width/height of other elements as 'blat' is animated
jQuery('#foo').css({height: now+'px'});
jQuery('#bar').css({width: now+'px'});
},
complete: function _completeCallback() {
// Do some other animations when finished...
}
}
回答by Corey Ballou
I agree with @SLaks on this one. You should be using jQuery's callbacks for given animations to create your synchronous animation. You can essentially take whatever you have for your current animation and split it up like so:
我同意@SLaks 的观点。您应该对给定的动画使用 jQuery 的回调来创建同步动画。从本质上讲，您可以将当前动画所拥有的任何内容进行拆分，如下所示：
$yourClass = $('.yourClass');
$yourClass.animate({
width: "70%"
}, 'slow', null, function() {
$yourClass.animate({
opacity: 0.4
}, 'slow', null, function() {
$yourClass.animate({
borderWidth: "10px"
});
});
});
回答by John van Dijk
I came across this http://lab.gracecode.com/motion/Really easy to use and works great in combination with jquery.
我遇到了这个http://lab.gracecode.com/motion/真的很容易使用并且与 jquery 结合使用效果很好。
EDITThe links seems dead. If I've followed the trail those the wayback archive correctly, the code is at https://github.com/feelinglucky/motion
编辑链接似乎死了。如果我正确地跟踪了那些回溯档案，代码在https://github.com/feelinglucky/motion
回答by Ben
jQuery can make synchronous animations. Check this out:
jQuery 可以制作同步动画。看一下这个：
function DoAnimations(){
$(function(){
$("#myDiv").stop().animate({ width: 70 }, 500);
$("#myDiv2").stop().animate({ width: 100 }, 500);
});
}
回答by Jason Miesionczek
Here is a module i put together a while back to assist in running animations sequentially.
这是我不久前组合在一起的一个模块，以帮助按顺序运行动画。
Usage:
用法：
var seq = [
{ id: '#someelement', property:'opacity', initial: '0.0', value:'1.0', duration:500 },
{ id: '#somethingelse', property:'opacity', value:'1.0', duration: 500 }
];
Sequencer.runSequence(seq);
var Sequencer = (function($) {
var _api = {},
_seq = {},
_seqCount = 0,
_seqCallback = {};
function doAnimation(count, step) {
var data = _seq[count][step],
props = {};
props[data.property] = data.value
$(data.id).animate(props, data.duration, function() {
if (step+1 < _seq[count].length) {
doAnimation(count, ++step);
} else {
if (typeof _seqCallback[count] === "function") {
_seqCallback[count]();
}
}
});
}
_api.buildSequence = function(id, property, initial, steps) {
var newSeq = [],
step = {
id: id,
property: property,
initial: initial
};
$.each(steps, function(idx, s) {
step = {};
if (idx == 0) {
step.initial = initial;
}
step.id = id;
step.property = property;
step.value = s.value;
step.duration = s.duration;
newSeq.push(step);
});
return newSeq;
}
_api.initSequence = function (seq) {
$.each(seq, function(idx, s) {
if (s.initial !== undefined) {
var prop = {};
prop[s.property] = s.initial;
$(s.id).css(prop);
}
});
}
_api.initSequences = function () {
$.each(arguments, function(i, seq) {
_api.initSequence(seq);
});
}
_api.runSequence = function (seq, callback) {
//if (typeof seq === "function") return;
_seq[_seqCount] = [];
_seqCallback[_seqCount] = callback;
$.each(seq, function(idx, s) {
_seq[_seqCount].push(s);
if (s.initial !== undefined) {
var prop = {};
prop[s.property] = s.initial;
$(s.id).css(prop);
}
});
doAnimation(_seqCount, 0);
_seqCount += 1;
}
_api.runSequences = function() {
var i = 0.
args = arguments,
runNext = function() {
if (i+1 < args.length) {
i++;
if (typeof args[i] === "function") {
args[i]();
runNext();
} else {
_api.runSequence(args[i], function() {
runNext();
});
}
}
};
// first we need to set the initial values of all sequences that specify them
$.each(arguments, function(idx, seq) {
if (typeof seq !== "function") {
$.each(seq, function(idx2, seq2) {
if (seq2.initial !== undefined) {
var prop = {};
prop[seq2.property] = seq2.initial;
$(seq2.id).css(prop);
}
});
}
});
_api.runSequence(arguments[i], function (){
runNext();
});
}
return _api;
}(jQuery));
