jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。 .hover()を利用してみる とりあえず、.hover()の使い方からおさらいしてみたいと思います。 .hover()メソッドは、マウスを乗せた時とはずした時の２つの処理を入れておくことで、実現できます。 $('#demo1 p').hover(function(){ $(this).fadeTo('fast',.3); },function(){ $(this).fadeTo('fast',1); }); マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。 以前は乗せた時とはずした時の２つの処理を入れておかなければエラーだったのですが、現

Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。

「OWL Carousel」は、レスポンシブ対応の高機能カルーセルを実装できるjQueryプラグインです。マウス操作だけでなく、スマートフォンによる指での操作（フリックやスワイプ、タッチ）にも対応していて、レスポンシブWebデザインで取り入れると力を発揮しそうですね。 動作もサクサクしており、ファイルサイズも8.8KBと軽量なのも魅力です。ただし、CSS3のtranform3dを利用しているので、IE9以下では利用できません。 ※IE9はtransform2dは実装されていますが、3dが実装されていないので動きません。 一式ダウンロードされますが、必要なのは「owl-carousel」というフォルダにある「owl.carousel.min.js」と「owl.carousel.css」です。OWL Carouselが用意したスタイルを利用する場合は「owl.theme.css」も必要です。

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti

Webページ上でJavaScriptやjQueryなどを使って ロールオーバーやタブ切り替えの様な 何かのアクションによって画像を表示する動作を組み込んだ際 画像をロードするのに少し時間がかかることによって 一瞬画像部分がチラつくことがあります。 その現象を回避する為に、切り替え後に表示する画像ファイルを 前もって読み込んでおく画像プリロードがありますが、 これをjQueryを使って実装する方法を自分用メモとして紹介。 画像プリロードについてはHTMLとCSSは特に関連しないので スクリプトのみの記述方法について。 複数枚の画像ファイルを一度に プリロードする記述方法は以下の様になります。 ◆SCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.

索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア

checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。 attrでも取れないこともないですが、propで取得する方が処理が早いです。 特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。 attrとpropの取得の違い またこの２つは、同じ値を取得してるようで異なる値を取得するので注意。 例えば //チェックした値を取得するよー $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); の場合、 チェック時 prop true attr checked 非チェック時 prop fal

"Yahoo!知恵袋"で下記のような質問に出会ったので、実際に作ってみました。 javascriptによる順序の並び替え。 - Yahoo!知恵袋 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1487903314 実験ページ http://usamimi.info/~sutara/sample/jq_sort.php ソース(抜粋)※ 全文は、実験ページのソースをご覧下さい。 並べ替えるリストid名の数値の順番に並べ替えます。 <ol id="test1"> <li id="3">id:3 cccccc</li> <li id="4">id:4 dddddd</li> <li id="1">id:1 aaaaaa</li> <li id="2">id:2 bbbbbb</li> </ol> JavaScript var

以前配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみたという記事を書きました。この記事は「やろうと思えばこういう方法でもできるなぁ」というアイデアについて書いた記事だったのですが、Javascriptで配列にある値が存在するかどうかを確認する一般的な方法を探して当該記事を訪問していただくことが多いので改めてこの方法について書いてみたいと思います。 といってもJavascriptには"Array.contain"のような「まさにそのためにある」というメソッドが用意されているわけではないのでいずれにしろ方法の紹介ということになってしまいますが。 次の3つのパターンに分けて書きたいと思います。 ECMAScript 5が使える場合 jQueryが使える場合 上記のどちらも使わない場合 1.ECMAScript 5が使える場合 ECMAScript 5では配列に"indexO