タグ

2014年12月2日のブックマーク (3件)

  • 色をアニメーションで変更する「jQuery Colorプラグイン」

    配布元:jquery/jquery-color · GitHub ライセンス:MITライセンス jQueryのanimateメソッドは、top、bottomやmargin、padding、width、heightなどの数値を指定できるプロパティをしかアニメーションさせることはできませんが、jQuery Colorプラグインを読み込むことで色に関してもアニメーションで変化させることが可能になります。 利用方法 jQuery体とダウンロードしたjquery.color-2.1.1.jsを読み込むことで、色に関してアニメーション指定が可能になります。 次のサンプルでは#d1がクリックされた際に#d1の色を赤から白にアニメーションして変更しています。 $("#d1").click(function(){ $(this).animate({ "backgroundColor":"#FFFFF" }

  • プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび

    ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト(画像)を横にピコッとずらすアニメーション 画像をボワ~と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.

  • JQuery.animate()のbackgroundColorにハマった

    JQueryで背景色を変えるアニメーションを作ろうとした。 $('#element').animate( {backgroundColor: '#F2ABCA'}, 'fast' ); 動かない。 FFのエラーコンソールを見ると 色であるべきところが'NaNpx'になっています。 と怒られました。 調べると公式ドキュメントにちゃんと書いていました。 http://semooh.jp/jquery/api/effects/animate/params%2C+%5Bduration%5D%2C+%5Beasing%5D%2C+%5Bcallback%5D/ そもそも数値型の値をとらない属性(backgroundColorなど)には、animate関数は対応していません。 じゃあどうするかというと、Color Animationプラグインを読み込めばいいみたいです。 http://plugins