クリックで開閉するアコーディオンパネル
Result jQuery//最初以外を隠す $('#faq .answer').not(':first').hide(); //クリックイベント $('#faq .question').click(function() { //スライドの処理 if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } });css.question { padding:5px; font-weight:bold; font-family:Arial; font-size:14px; border:1px solid #ddd; ba
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
要素の切り替えを美しく表現するプラグイン・エフェクト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。 要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選 fullPage.js https://alvarotrigo.com/fullPage/ フルスクリーン表示のページを切り替えるプラグイン。 DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。 Section Separators https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ 主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。 約25種類ほど用意され
ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【jQuery連載03】 | HTML5でサイトをつくろう
今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。 一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。 写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。 今回作成したサンプル 背景に写真を配置したサンプルを見る 背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る ビジュアル画像をHTMLに読み込ませる 今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。 画像が拡大縮小されるからと
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
