JQuery同步动画
在许多情况下，我希望动画同步执行。 特别是当我想制作一系列连续动画时。
有没有一种简单的方法可以使jQuery animate函数调用同步？
我想到的唯一方法是在动画结束时将标志设置为true并等待此标志。
jQuery无法制作同步动画。
请记住，JavaScript在浏览器的UI线程上运行。
如果您制作同步动画，浏览器将冻结，直到动画结束。
你为什么需要这样做？
您应该使用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; }); }
这称为闭包。
我想你应该看一下jQuery queue（）方法。
queue（）的doc解释jQuery动画不仅没有真正阻止UI，而且实际上将它们排在一起。
它还提供了一种方法来使您的动画和函数调用顺序（这是我对“ 同步 ”的意思的最好理解），如：
$("#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() // }
这当然是异步处理的过度杀伤; 但是如果你的方法实际上是一个简单的旧同步javascript方法，那可能是这样做的方法。
希望这有帮助，对不起我的英语不好……
jQuery为其.animate（）方法提供了“步骤”回调。 你可以挂钩进行同步动画：
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... } }
我同意@SLaks的观点。 您应该使用jQuery的回调来为给定的动画创建同步动画。 你可以基本上把当前动画的所有东西都拿走，然后把它分开：
$yourClass = $('.yourClass'); $yourClass.animate({ width: "70%" }, 'slow', null, function() { $yourClass.animate({ opacity: 0.4 }, 'slow', null, function() { $yourClass.animate({ borderWidth: "10px" }); }); });
这是一个我放在一起的模块，以帮助顺序运行动画。
用法：
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));
jQuery可以制作同步动画。 看一下这个：
function DoAnimations(){ $(function(){ $("#myDiv").stop().animate({ width: 70 }, 500); $("#myDiv2").stop().animate({ width: 100 }, 500); }); }
我遇到了这个http://lab.gracecode.com/motion/真的很容易使用，并且与jquery结合使用效果很好。
编辑链接似乎已经死了。 如果我按照正确的方式跟踪路径归档，则代码位于https://github.com/feelinglucky/motion