function doSomething（）{var thingy = whatever;} // $ do（$ something）。animate（{width：70}、function（）{//アニメーションが終了した後、jQueryはこのメソッドを呼び出します。 //ここからコードを続けることができます。 //外側の関数から変数にアクセスすることもできますthingy = thingy.fiddle; ;））; }
20
7
多くの場合、私はアニメーションが同期して実行されることを望みます。 特に私が一連の連続したアニメーションを作りたいときは。
jQueryの `animate`関数呼び出しを同期化する簡単な方法はありますか？
私が考えた唯一の方法は、アニメーションが終了したらフラグをtrueに設定し、このフラグを待つことです。
7 回答
25
jQueryは同期アニメーションを作ることができません。
JavaScriptはブラウザのUIスレッド上で実行されます。
同期アニメーションを作成すると、アニメーションが終了するまでブラウザはフリーズします。
なぜあなたはこれをする必要がありますか？
次のように、おそらくjQueryのコールバックパラメータを使用して、コールバック内でメソッドコードを続行する必要があります。
function doSomething（）{var thingy = whatever;} // $ do（$ something）。animate（{width：70}、function（）{//アニメーションが終了した後、jQueryはこのメソッドを呼び出します。 //ここからコードを続けることができます。 //外側の関数から変数にアクセスすることもできますthingy = thingy.fiddle; ;））; }
これはクロージャと呼ばれます。
6
jQueryの queue（）メソッドを見てください。
queue（）のドキュメントがjQueryアニメーションを説明するだけでなく、実際にUIをブロックするわけではなく、実際にそれらを順番に並べています。
それはまたあなたのアニメーションと関数呼び出しをシーケンシャルにする方法を提供します（これはあなたが "synchronous"によって何を意味するかについての私の最も良い理解です）：
$（ "＃myThrobber"）.show（ "slow"）//ユーザーからのフィードバックを提供します。 //ユーザーからのフィードバックを提供する
myNotAnimatedMethod（）{//またはアニメ化されています。 //何かをする//
//＃myThrobberの（ "this"）キューにあなたのメソッドが "return"を指示し、//キュー内の次のメソッド（ "hide"アニメーション）を処理できる
// * hide（）の前に順番に実行する必要のない、より多くのことをここで行う
これはもちろん非同期処理ではやり過ぎです。しかし、もしあなたのメソッドが実際には普通の古い同期JavaScriptメソッドであれば、それがその方法かもしれません。
これが助けになることを願っています、そして私の下手な英語をごめんなさい…
2
jQueryはその.animate（）メソッドのための "step"コールバックを提供します。 これにフックして同期アニメーションを実行できます。
jQuery（ '＃blat'）。animate（{//高さを変更するCSS： '0px'}、{duration：2000、step：function _stepCallback（now、opts）{//境界DOM値に対するブラウザの丸め誤差を停止する（width 、高さ、マージンなど）now = opts.now = Math.round（現在）。
// 'blat'がアニメーション化されたjQuery（ '＃foo'）として他の要素の幅/高さを操作するcss（{height：now 'px'}）; jQuery（ '＃bar'）。css（{width：now 'px'}）; function _completeCallback（）{//終了したら他のアニメーションを実行します... }}
1
私はこれについて@SLaksに同意します。 同期アニメーションを作成するには、特定のアニメーションに対してjQueryのコールバックを使用する必要があります。 あなたは基本的にあなたが現在のアニメーションに持っているものは何でも持っていってそれをそのように分割することができる：
$ yourClass = $（ '。yourClass'）; $ yourClass.animate（{width： "70％"}、 'slow'、null、function（）{$ yourClass.animate（{opacity：0.4}、 'slow'、null、function（）{$ yourClass.animate（ {borderWidth： "10px"}）;}）;}）;
0
私はこのhttp://lab.gracecode.com/motion/に出会いました本当に本当に使いやすく、jqueryと組み合わせて素晴らしい作品。
*編集*リンクは切れているようです。 私がトレイルをたどってそれらのウェイバックアーカイブを正しく追跡した場合、コードはhttps://github.com/feelinglucky/motionにあります。
0
jQueryは同期アニメーションを作ることができます。 これをチェックしてください。
関数DoAnimations（）{$（関数（）{$（ "＃myDiv"）。stop（）animate（{width：70}、500）; $（ "＃myDiv2"）。stop（）animate（{width ：100}、500）;}）; }
0
これは、アニメーションを連続して実行するのを支援するためにしばらく時間をかけてまとめたモジュールです。
使用法：
var seq = [{id： '#someelement'、プロパティ： 'opacity'、初期値： '0.0'、値： '1.0'、期間：500}、{id： '#somethingelse'、プロパティ： 'opacity'、値： '1.0'、期間：500}];
Sequencer.runSequence（seq）;
'' '' '
var Sequencer =（function（$）{var _api = {}、_seq = {}、_seqCount = 0、_seqCallback = {};
関数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] = == "関数"）{_seqCallback [count]（）;}}}）; }
_api.buildSequence = function（id、property、initial、steps）{var newSeq = []、step = {id：id、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）;}）;
newSeqを返します。 }
_api.initSequence = function（seq）{$ .each（seq、function（idx、s）{if（s.initial！==未定義）{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！==未定義）{var prop = {}; prop [s.property] = s.initial; $（s.id）.css（prop）; }
;））;
doAnimation（_seqCount、0）; _seqCount = 1; }
_api.runSequences = function（）{var i = 0。 args =引数、runNext = function（）{if（i 1 <args.length）{i; if（typeof args [i] === "関数"）{args [i]（）; runNext（）; } else {_api.runSequence（args [i]、function（）{runNext（）;}）; }}};
//最初にそれらを指定するすべてのシーケンスの初期値を設定する必要があります$ .each（arguments、function（idx、seq）{if（typeof seq！== "function"）{$ .each（seq、function（idx2） 、seq2）{if（seq2.initial！==未定義）{var prop = {}; prop [seq2.property] = seq2.initial; $（seq2.id）.css（prop）;}}）;}
;））;
_api.runSequence（arguments [i]、function（）{runNext（）;}）;
}
_apiを返します。 （jQuery））;