jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
67種類ものエフェクトが使えるjQueryプラグイン PAGE TRANSITIONS | スターフィールド株式会社
66種類ものスライドが使えるjQueryプラグイン PAGE TRANSITIONSをつかってみた。 http://tympanus.net/Development/PageTransitions/ 非常にクオリティの高いエフェクトが揃っており、 様々なオブジェクトに対して利用できるため、これだけ使ってれば良いのではと思えた。 設置方法は <ul class="dl-submenu"> <li data-animation="1"><a href="#">右から左へスライド</a></li> <li data-animation="2"><a href="#">左から右へスライド</a></li> <li data-animation="3"><a href="#">下から上へスライド</a></li> <li data-animation="4"><a href="#">上から下へスライ
スマホアプリのような横から出てくるサイドメニューを実装できるjQueryプラグイン
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。） えらい！ jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;
[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」:phpspot開発日誌
GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」 2010年04月28日- jQuery google api and other google hosted javascript libraries. - ScriptSrc.net GoogleにホスティングされているjQuery等の便利JSタグを一瞬でコピーできる便利サイト「ScriptSrc.net」。 jQueryを使うサイトでは、通常、自分のサーバにjQueryをアップロードして、<script>タグ書いて、srcでその位置を指定して、なんていう面倒なステップを踏むわけですが、このサイトにアクセスしてボタンを１回おせば、利用用のタグがクリップボードにコピーされます。 コピー例：<script type="text/javascript" src="htt
見逃してない？最近注目されているjQueryプラグイン・JavaScriptライブラリ
Retina.js | Retina graph... / lake.js / Timeline他...全5件 Retinaディスプレイかどうかを判別して、高解像度の画像（@2x）をサーバーにアップしておけば、自動的に呼び出してくれるJavaScriptライブラリ。
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js)
ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js) はいこんにちは！今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です！ Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。 動作デモ 画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。 実際のデモサイトはこちら 特徴 簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能
デスクトップ／モバイル対応JavaScriptライブラリ「Dojo 1.7」リリース。JSライブラリはまだまだ混戦か
先日、ユーザーインターフェイスやグラフなどの機能を備え新しく登場したJavaScriptライブラリ「Kendo UI」を紹介しましたが、この分野で以前からある「Dojo Toolkit」も最新版の1.7がリリースされました。 DojoはDOM操作のためのAPIやアニメーション効果などの機能のほか、ユーザーインターフェイスのためのウィジェット、グラフ表示などの機能が含まれています。 モジュール構造になっており、性能向上のためにモジュールのロードは AMD (asynchronous module definition)と呼ばれる非同期になっているのが特徴とされています。最小構成のDojo Nanoは4KB以下の大きさだそうです。 Dojo 1.7で新しく追加された複雑なユーザーインターフェイスを持つグリッドと、グラフの例を紹介しましょう。 iOSやAndroidなどのモバイル専用に拡張した「
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
Loading...
https://design-spice.com/2012/06/13/responsive-web-design-image/
最近流行のダイナミックなサイト作りに役に立つ、最新のjQueryプラグイン
