jQuery の .animate() で普通のオブジェクトをアニメーションさせる - ダーシマ・ヱンヂニヤリング
説明するより見たほうが早かったりして。 $({ x:0, y:100 }) .animate({ x:100, y:50 }, { duration:5000, progress:function (anim, progress, fx) { console.log('x:' + anim.elem.x, 'y:' + anim.elem.y)); } }) このように、プリミティブなオブジェクトでも animate メソッドでグリグリと値を変化させられる。通常の animate と同じように、 duration や easing といったオプションも指定できる。 案外知られていないのではなかろうか。スムーススクロールなどに使えそうですね。 jQuery 1.7.x 以前の場合 jQuery 1.7.x 以前は、 animate メソッドのオプションとして progress を指定できない
jQuery で複数の要素のアニメーションが全て終わったら何かを実行する - ダーシマ・ヱンヂニヤリング
jQuery でたくさんの要素をグリグリ動かしたいときに、完了時刻の違う複数の要素のアニメーションが両方終わった時に何かを実行する、というような処理をしたいと思うことがある。 完了時刻が遅い方のコールバックに処理を書けば、望みのことは出来る。ただ、このようにして書かれたコードは変更に弱いし、見ただけで何をしたいコードなのかがパッと見わからなくなる。 アニメーション完了後に何かをするといえば、慣例的に以下のように書くことがポピュラーである。 $('.target') .animate({ top: '+=100px' }, 500, 'swing', function () { // アニメーション完了後に実行される alert('done!'); }); jQuery 1.6 から、 animate や fadeOut といった処理がキューに入る系のメソッドでは、キューがすべて空っぽになっ
jQuery でアニメーションの前後に .css() とか .addClass() とかしたい時に .queue() を使う - ダーシマ・ヱンヂニヤリング
やりたいこと jQuery の animate メソッドを使って見た目を作っている時、アニメーションの完了後にクラスを付与したいとか、 CSS を変更したいというようなことはよくある。これをエレガントな感じに書きたい。 何も考えずに jQuery っぽく書いてみる $('.target') .animate({ left: '100px', top: '100px' }, 500, 'swing') .css('background-color', 'red'); これだとうまくいかない。アニメーションが終了した時に背景色が赤になってほしいが、アニメーションが始まったと同時に赤くなってしまう。 animate のコールバック関数を指定する 解決策のひとつとして、 animate メソッドの最後の引数にコールバック関数を指定する方法がある。指定したコールバック関数は、アニメーションが完了した
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
