jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ｜BLACKFLAG
jQueryを使ったアニメーションではCSSのプロパティ値を操作することによって ページ上に様々なバリエーションのアニメーションを簡単に実装することが可能になりますが 現状（ver.1.8）のデフォルト状態でのjQueryファイルでは CSS3のTransform系の回転「rotate」や拡大縮小「scale」といった アニメーション値を操作することはできません。 そんなCSS3のTransform関連のプロパティ値を jQueryアニメーションとして操作させることを可能とするプラグインがいくつかあったので 使いやすかったものをサンプルアニメーションを交えて紹介してみます。 jquery-css-transform.js ／ jquery-animate-css-rotate-scale.js jQueryでCSS3のTransformアニメーションを操作させるプラグインはいくつかあります
jQuery のcssプロパティ拡張(独自プロパティ)の作り方 - お前の血は何色だ!! 4
みんな大好き、javascriptライブラリの jQueryには、 $(elem).css({ width: 123 }); とか var width = $(elem).css('width'); とか $(elem).css('width',123); とかみたいに、 .css メソッドを利用して値が設定や取得ができます。 ただ、最初から決められたものだけではなくて、自分で好きなプロパティ作って自由に設定したいですよねw ここでは、前回作った、 クロスブラウザな回転 で rotate や transform を実装したときに使ったテクニックを解説したいと思います。 クロスブラウザーな回転では、 rotate 等の独自プロパティを定義しています。 rotateによって、自由な回転角度を設定できます。 $(elem).css({ rotate: 123 }); とか var rotate
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita
以下のスライドを意訳したものです。Compress周りについては触れていません。「いやいや、最新の書き方だともっと良い書き方があるんだよ！」という方のコメントをお待ちしております！ http://www.slideshare.net/paul.irish/perfcompression クエリをキャッシュする // 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { v
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
jQuery 特定要素がアニメーション中か判別する方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTiosは【jQuery 特定要素がアニメーション中か判別する方法】です。随分局所的なTipsですが…先日作成した謎スライダーでも活躍していたのでメモしておきます。 実装方法 読み込み <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> if($(‘#tgt’).is(‘:animated’)){ $(‘#flg’).text(‘Animate’); }else{ $(‘#flg’).text(‘…’); } どのタイミングで判別させるかによって動作のタイミングが変わってきますのでお気をつけ下さい。 一定時間ごとに判別 setInterval(function(){ if($(‘#tgt’).is(‘:animated’)){ $(‘#flg’).text(‘A
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
pjax (pushState + Ajax) jquery plugin 使用方法 などなど
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語（pushState + ajax = pjax）となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!（hashbang）を
とほほのjQuery入門 - とほほのWWW入門
トップ > jQuery 目次 目次(ABC順) リンク コア コア(基本) セレクタ セレクタ(基本) セレクタ(継承) セレクタ(属性) セレクタ(基本フィルタ) セレクタ(コンテンツフィルタ) セレクタ(ビジビリティフィルタ) セレクタ(子要素フィルタ) セレクタ(フォームフィルタ) トラバース トラバース(親子関係) トラバース(フィルタリング) トラバース(その他) イベント イベント(イベントハンドラ) イベント(ブラウザイベント) イベント(読み込み) イベント(フォーム関連) イベント(キーボード関連) イベント(マウス関連) イベント(イベントオブジェクト) 属性・値 属性・属性値 HTML・テキスト・値 クラス スタイルシート スタイルシート(基本) エフェクト エフェクト(表示) エフェクト(フェードイン) エフェクト(スライドアップ) エフェクト(カスタム) 操作
jQueryでページ内の見出しに合わせて目次を自動生成する - jsdo.it - Share JavaScript, HTML5 and CSS
(function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol'); }); };
[JS]これは楽しい！スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
大きめのソフトウェアキーボードを実装できるjQueryプラグイン:phpspot開発日誌
Javascript, jQuery and other Junk: jQuery UI Keyboard Widget 大きめのソフトウェアキーボードを実装できるjQueryプラグイン。 次のようなソフトウェアキーボードをInputに対して付与することができるようになります。 ソフトウェアキーボードでセキュリティを高めたい、という場合に参考にしてみてもよいかも。 関連エントリ キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 キーボード不要でMySQLクエリを組み立てられるChromeアプリ「MyQuery Builder」 サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」
テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found • Namecheap.com
Scott Robbin
オンラインでjQuery UIのデザインを作成・「jQUIT」
forked: jQuery Mobile: page() - jsdo.it - Share JavaScript, HTML5 and CSS