jQuery の animate で、透明⇔不透明のアニメーション動作
透明から不透明、もしくは、不透明から透明のアニメーション動作は、jQuery の animate の 1つ目の引数内で、opacity に toggle、show、hide、0～1 の数字（0.5など）を指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の opacity: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、透明になり、最終的には見えなくなる。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、不透明になり、出現。 animate( { opacity: 'to
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
jQueryでリサイズしても画面の中央に要素を表示する | Typhooon
ウインドウの大きさが変更されるたびに発生する resize イベントを利用して。ウインドウサイズが変更されても要素が画面の中央に再配置される方法を紹介します。 書式は次のようになります。 [javascript] $(window).resize(function(){ // }); [/javascript] このイベントを使って、ウィンドウがリサイズされるたびにウインドウの幅と高さを取得するサンプルです。 [javascript] $(window).resize(function(){ var wh = $(window).height(); var ww = $(window).width(); $(“#result”).text( “width : ” + ww + ” / height : ” + wh ); }); [/javascript] ここまでできればもう簡単です。ウ
画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「imgLiquid」 | NAKAZI LAB.（ナカジラボ）
デモページ JavaScript (function($){ $(function(){ $('.thumbnail a').imgLiquid({ fill:true, fadeInTime:300 }); }); })(jQuery); HTML <div class="type"> <div class="img"> <a href="#"><img src="img01.png" alt="220x356（元画像）" /></a> <span class="caption">220x356（元画像）</span> </div> <div class="img thumbnail"> <a href="#" class="trimming200x200"><img src="img01.png" alt="200x200" /></a> <span class="caption">2
画像編集いらず！jQueryとCSSだけで画像をトリミング＆センタリングする | ホームページ制作・開発／大阪｜アルカナワークス
商品画像の一覧を作成したいとか、トップページにブログ内の画像を固定サイズにトリミングして表示したい。 そんな時に元画像を変更せずにCSSとｊQueryだけで自動的にトリミング＆センタリングする方法をご紹介します。 システムで自動的に商品一覧を表示しているときや、 Wordpressなどで登録するときに、画像を編集してトリミングとか難しいことができない、 といった時に便利に使えます。 CSSでのトリミングはもともとこのサイトで紹介されていたのですが CSS GLOBE – Create Resizing Thumbnails Using Overflow Property こちらはCSSだけでの方法なので、画像をセンタリングするには1つ1つ調整するか、 元の画像を決められたサイズにしなくてはいけませんでした。 そこで、追加でｊQueryで、画像をセンタリングるものを組み合わせてみまし
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
Easy Responsive Tabs to Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis. This tab has icon in consectetur adipiscing eliconse consectetur adipiscin
jQueryでアコーディオンの入れ子 ： javascript, jquery | メモリークラフト
アコーディオンメニューを作成するときに、メニューの中にさらにアコーディオンを作りたいときがあったのですが、以外に簡単にできたのでメモします。 作り方は簡単。アコーディオンのヘッダ部分とボディ部分の二つにclass指定して、 タグ構造を入れ子にします。あとはjQueryでスライドさせるだけです。ちなみにjQuery UIのアコーディオンではないです。 JSコード(jQueryを使用しています。) $(document).ready(function() { $("div.accordion").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("div.accordion").click(function(){ $(this).ne
お探しのページは見つかりませんでした。- 有限会社キートン
指定されたURLのページは存在しません。 サイト更新などによってURLが変更になったか、URLが正しく入力されていない可能性があります。 ブラウザの再読込を行ってもこのページが表示される場合は、サイトマップまたはサイト内検索でお求めのページをお探しください。 トップページに戻る
最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月 | webrecuration:IT/Webデザイン系ブログ
可変グリッドレイアウトとは、ボックスをタイル状に並べるプラグイン…っておなじみですね。Pinterestやfacebookのタイムラインにも採用されています。基本的にこのレイアウトの実装はmasonry.js一強な感じだったのですが最近またあたらしく登場してきたのでご紹介。 Masonry.js まずは一番流行しているMasonryから。日本語の解説もいっぱいあるのでだいぶ安心です。 無限スクロールを実装するInfiniteScrollと組み合わせた例。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル – かちびと.net WordPressのデフォルトテンプレートであるTwentyElevenに導入した例。WordPressではそのままだとうまくいかないようです。 WordP
タイルレイアウトjsIsotope
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ naoyu.net
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな？
50 Amazing jQuery Plugins That You Should Start Using Right Now
50 Amazing jQuery Plugins That You Should Start Using Right Now jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery combine .ready and .resize
http://mmenu.frebsite.nl/
GitHub - xlune/jQuery-vGrid-Plugin: VARIABLE GRID LAYOUT
Tutorialzine
