jQuery リファレンス：hide
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES
jQueryで要素の表示・非表示を切り替える方法についてです。 要素の非表示 ( hide ) hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。 <body> <button>click</button> <p>表示されてるメッセージ</p> </body> $(function() { $('button').click(function(){ $('p').hide(); }); }); .hide()はcss('display', 'none')と同じ意味です。 $(function() { $('button').click(function(){ $('p').css('display', 'none'); }); }); .hide() | jQuery 1.9 日本語リファレンス | js STUDIO サンプ
メガドロップダウンメニューをjQueryとCSSで作る：via Mega Drop Down Menus w/ CSS & jQuery
メガドロップダウンメニューをjQueryとCSSで作る：via Mega Drop Down Menus w/ CSS & jQuery サイトが巨大化するにつれ、多くの情報を一度に見せられる方法が運営者に求められています。 それを解決する一つの手段がメガドロップダウンメニューです。 一見、ユーザビリティ上好ましく見えないかもしれませんが、ユーザビリティの第一人者「Jakob Nielsen」はAlertbox: メガドロップダウン式のナビゲーションメニューは効果あり（2009年03月23日）と述べています。 今回はjQueryを利用して、メガドロップダウンメニューを作成してみたいと思います。 via：Mega Drop Down Menus w/ CSS & jQuery sponsors 使用方法 ※長いので、先にサンプルを見る まず以下のようなメニューが記述されているとします。 <u
メガドロップダウン - Webデザインの勉強 Webサイト制作科補足
2016 - 06 - 03 メガドロップダウン jQuery メガドロップダウン 手順 HTMLの文章構造を構築 CSS を記述 hover時の設定を記述 メガドロップダウンメニュー WORKS PRODUCT RECRUIT BLOG CONTACT WORKS DESIGN・HTML/CSS・SYSTEM 制作について紹介します。 DESIGN ＞コンセプトワーク ＞受賞リスト ＞実績紹介 HTML/CSS ＞W3C推奨マークアップ ＞構築手順 ＞構築実績 SYSTEM ＞WEBシステム設計 ＞データ解析 PRODUCT プロダクト・サービスについて紹介します。 WEB ＞WEBサイト制作 ＞CMS設計 ＞制作の流れ MOBILE & SMART PHONE ＞レスポンシブ制作 ＞APP制作 ＞使用言語 SERVER ＞サーバ構築＆運営 ＞サーバ移行 ＞DB設計 RECRUIT 新卒
jQueryで画像ポップアップ表示を行うLightboxを設置する方法 (2017年版)
小さなサムネイル画像をクリックすると大きな画像がポップアップで表示される「Lightbox」を設置する方法を紹介します。 デモ準備設置方法参考サイト １．デモ Lightboxのオフィシャルサイトで動作デモを確認することができます。 Lightboxオフィシャルサイト ２．準備 拡大表示用の高解像度画像ファイルを準備し、サムネイル画像から高解像度画像へリンクを設定します。 <a href="大きな画像.jpg"><img src="サムネイル画像.jpg" alt=""></a> ３．設置方法 手順１ 「Lightbox」用ファイルのダウンロード 「Lightbox」の設置に必要なファイルをダウンロードします。 Download Lightbox2 手順２ 「Lightbox」用ファイルをサイトフォルダ内に配置 ダウンロードした圧縮ファイルを展開し、「src」フォルダ内の「css」「ima
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
マルチウィンドウ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
jQueryでappleぽい画像ギャラリーを作る via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
jQueryでappleぽい画像ギャラリーを作る via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery デザインの美しさと洗練された機能により人気のapple商品。 そんなappleぽいスライド型画像ギャラリーをjQueryで作成します。 via：A Beautiful Apple-style Slideshow Gallery With CSS & jQuery -- Tutorialzine sponsors 使用方法 とりあえずjQueryからjquery.jsをダウンロードしときましょう。 また、ギャラリー部分は下記のようなマークアップをします。 メイン画像と対応するサムネイルを置く形です。 <div id="main"> <div id="gallery"> <div id="slides"> <div c
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Introduction When speaking about design, there is one company that is impossible to go without. Apple values design - being a new product, a fancy catalog or their website - there is always something to admire. This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases r
Easy Slider -画像やコンテンツをスライドで切り替える[jQueryプラグイン] - JavaScriptテックラボ - [SMART]
使用方法 リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 Easy Sliderからファイル一式をダウンロードします。 Easy Slider 1.7 - Numeric Navigation jQuery Slider HEAD要素にjQueryとEasy Sliderプラグインを呼び出すコードを記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="easySlider.js"></script> 続けてHEAD要素にEasy Sliderを呼び出すスクリプトを記述
![Easy Slider -画像やコンテンツをスライドで切り替える[jQueryプラグイン] - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
[JS]スムーズなアニメーションで横スクロールコンテンツを作成するスクリプト -X-Rhyme.js
水平方向に長いコンテンツをスムーズなアニメーションで横スクロールさせるjQueryのプラグインを紹介します。 X-Rhyme.js [ad#ad-2] デモページが少し分かりにくいのですが、左に配置された四つの矩形がナビゲーションで、そこをクリックすると、コンテンツを横スクロールで表示します。 デモページ：「Work」をクリックしたキャプチャ 横スクロールの操作は、マウスホイールにも対応しています。 JavaSciprt スクリプトのオプションでは、ナビゲーションのセレクタ、スクロール時のスピード・アニメーションを変更することができます。 $('.horizontal_items_container').xrhyme({ navigationSelector : '.anchor a', anchorMode : true, wheelSpeed : 0.7, animationTime
[JS]画像を湖面にゆらゆらと映し出す癒し系スクリプト -lake.js
デモページ [ad#ad-2] lake.jsの使い方 HTML 画像はimg要素で配置し、「display: none;」で一旦非表示にします。 <img id="lake-img" src="lake.png" style="display: none;"/> 画像は下記のように、上半分のみ用意します。 使用している画像：lake.png 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="lake.js"></script> JavaScript jQueryのセレクタで適用する画像を指定し、スクリプトを実行します。 オプションではアニメーションのスピードやさざ波の量などを調整できます。 <script> $(function() { $('#lake-img
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://aqua-create.com/jquery/jquery-slide-show-gallery-tutorials/
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects