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 を指定できない
『スマートフォンUIのアニメーションについて』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 2012年6月にサービスを開始したスマートフォン向けソーシャルゲーム ULTIMATE RACERアルティメットレーサー）でデベロッパーをしている横田と申します。ULTIMATE RACERの開発時に、画面内のアニメーションをjQueryのanimate処理からcssアニメーションに切り替えた経緯について、自分なりの考察ともにご紹介したいと思います 対象としてはデザイナー、マークアップエンジニアでJSやcssでアニメーションの実装を始めたばかりの方が最適だと思います。 また本稿はjQueryのバージョン1.7.1を使用した場合を想定して記述しています
jQuery 1.8.0 ～ 1.8.3 での変更箇所の自分なりのまとめ | 私的なjQuery他
jQuery 1.8 , 1.8.1 , 1.8.2 , 1.8.3 のリリースノートを読んで、自分なりにまとめました。 といっても、1.8.1 と 1.8.2 、1.8.3は ほぼバグ修正メインなので、 1.8.0 だけのまとめとあまり違いありません。 誤訳による勘違いなどもあると思われるので、 読まれる際はご注意を。（※ページをそのまま訳したわけではありません） 箇条書きにすると以下のような感じ： Sizzle の書き直し アニメーションの見直し オプションにコールバックprogress, always, done, failを 追加 オプションにコールバックstart追加 animation オブジェクト Prefilters tween, tweener, jQuery.Tween.propHooks CSS のプレフィックスを自動化 $(html, props)のpropsでの指
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 メソッドの最後の引数にコールバック関数を指定する方法がある。指定したコールバック関数は、アニメーションが完了した
CSS3 Animation With jQuery Fallbacks
In today's post, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported. The benefit of transitions is that unlike JavaScript based animations, they're hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you
jQuery Animations with automatic CSS3 transitions when possible
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法 :: 5509
jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。 何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。 どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。 で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。 結論は簡単で .stop(true, false)を.animate()の前に入れる .animate()メソッドのオプション部分でqueue: falseを指定する のいずれかです。 このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わ
Using jQuery Stop
Full Cycle of Animation on Hover/Off Goals: Animate wide on mouseEnter Animate back on mouseLeave No matter what, perform a complete wide/back cycle Not queue up animations on multiple hovers Be smooth NOT Using .stop(); The smoothness of this is perfect, but the animations queue up. $("div").hover(function(){ $(this).animate({ width: "200px" }); }, function() { $(this).animate({ width: "100px" })
画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン | Web Mugen
前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 コーディング＆設定 HTML HTMLヘッダー内でjquery.jsを読み込む。 <script src="jquery.js" type="text/javascript"></script> ロールオーバーさせる要素の設定します。下記JavaScriptの設定だとimg要素にclass="rollover"です。 <img src="sa
Color animation jQuery plugin
Bitstorm.org > JavaScript > jQuery plugins > Color animation Animating colors With jQuery's animate function, you can animate all kinds of css-properties. What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties: color backgroundColor borderColor borderBottomColor borderLeftColor borderRightColor borderTopC
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
Living on the Edge – new Adobe animation tool sparks necessary conversations – Mozilla Hacks - the Web developer blog
Living on the Edge – new Adobe animation tool sparks necessary conversations Adobe made quite some splash in the last days by releasing Edge, a Flash-like tool to create HTML5/CSS3/JS driven animations. There is a need for a tool like that and I for one am very happy to see that Adobe are recognising this. Other tools that try to tackle the same task are already around, with the yet to be released
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
How to Make an Impressive Animated Landscape Header with jQuery « Build Internet
How to Make an Impressive Animated Landscape Header with jQuery Content doesn’t always have to stay visible. Sometimes it can hide in the most unexpected locations. In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery. This is going to be a big undertaking. I’ll warn you now, there will be a lot of code
CSS Sprites2 – It’s JavaScript Time
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re: jQuery Animation vs CSS – David Bushell – Freelance Web Design (UK)
Transit - CSS transitions and transformations for jQuery
‘animateToSelector’ jQuery plugin – James Padolsey