bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptjQueryの基本的なanimateメソッドを使って適当に遊んでみるJavaScript2012.01.23jQueryの基本的なanimateメソッドを使って適当に遊んでみるjQueryのanimateメソッドを使えば自分で好きなようにアニメーションを作ったりできるみたいなので試してみました。実際にちゃんと使ったことがなかったので勉強のためにどんな動きができるのかいくつかサンプルも作ったりしてみたんですが、思ったより簡単にできるのでとても便利ですね。複雑なものは何一つ作ってないんであれなんですが。超基本的な使い方を自分用にメモしときます。[ads_center]animateの使い方まずは基本的な構文をということで、使い方はとても簡単で、以下のようにして使います。値});例えば、widthの値が100pxの要素を200pxにアニメーションさせるにはこんな感じに指定してあげます。200});あと、気をつけたいのがfont-sizeなどといったハイフンで繋がれたプロパティを指定する場合にはそのまま書くのではなくクォーテーションで括るか、キャメル式で書くかのどちらかで記述する必要があるみたいです。15それと、backgroundなど数値としての値がないものは指定できないみたいですね。いうことでとりあえず適当にサンプルを作ってみたいと思います。以下、簡単なサンプルです。サンプル移動させる実行をクリックすると要素が斜め下に移動します。リセットで元の位置に戻ります。relative;}拡大させる要素を拡大させたりします。12px;}移動した後に背景の色を変更する左から右へ移動した後にコールバックで背景の色を変える指定をしています。逆に戻った後は背景を元に色に変更します。relative;}左右のボックスが上下逆方向に移動する左のボックスが真上に移動して、右のボックスが真下に移動します。移動した後は隠れていたテキストが表示されます。0;}まとめなんか余計なコードとかありそうですがとりあえず手軽にこんな感じで色々と作れるのがいいですね。animateメソッドだけでもかなり幅広いことができそうな感じです。今後もちょこちょこ弄りながら遊んでいきたいです。面白そうなプラグインだったので使ってみました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。