jQuery

JSON add addClass after ajax ajaxComplete animate append appendTo attr before bind blur change children click clipboard clone closest contents contextmenu cookie css datepicker dblclick delay die each empty eq error fadeIn fadeOut fadeTo fadeToggle filter find focus get hasClass hash height hide hover html if index innerHeight innerWidth insertAfter insertBefore is keydown keypress keyup live load map mousedown mousemove mouseout mouseover mouseup next nextAll not offset on one outerHeight outerWidth parent parents parseInt position prepend prependTo prev prevAll prop queue ready remove removeAttr removeClass replaceAll resize scroll scrollLeft scrollTop select show size slice slideDown slideToggle slideUp stop submit text toggle toggleClass touchend touchmove touchstart trigger unbind unload unwrap val width wrap wrapAll wrapInner getJSON skrollr smoothscroll lazyload Ticker replace masonry cache slick off fn extend serialize xml toArrays csv

• jQuery アンド条件で要素を表示する
• タグのようにいくつかのキーワードが紐づく要素があり、それぞれ複数のタグを持つ可能性があるとき、ボタンを複数選択することで絞り込むUIのサンプルです。 例えばボタンが５つあり、要素が８こあるとします。 ボタンを押すと、押したキーワードに紐づく要素だけが表示されるようにします。 複数のキーワードを...
• 2023-11-29 23:04:02

• JS サウンドビジュアライザー
• 音を使ったビジュアル表現のサンプルです。 jQueryとhowler.jsを使ったサウンドビジュアライザーのサンプルコードの備忘録です。 音のスピードや音量調整も簡易的に付けています。 BGM ra...
• 2021-06-02 00:56:29

• JavaScript 音とアニメーションの連携
• 音が出るボタンを設置し、音に合わせて動きをつけるサンプルです。 このサンプルはjQueryとhowlerJSを使って、音がでるボタンを作り、音から抽出した音の長さを使って、CSSでアニメーションを実装しました。 howerJSというオー...
• 2021-01-31 23:53:53

• jQuery スクロールでURLを書き換える
• URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための...
• 2019-07-29 20:32:02

• jQuery マウスオーバーで画像入れ替え
• マウスのカーソルを合わせると画像が入れ替わるサンプルです。 jQueryで画像の読み込みが完了した後に、オンマウスすると別の画像を表示します。 画像の入れ替えは、imgタグのsrc属性の値の文字列を置換するシンプルな記述...
• 2019-07-30 21:58:07

• JS URLのハッシュ値をUIに活用する
• URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。...
• 2019-08-07 22:06:43

• jQueryとCSS カードをクリックでめくる表現
• jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。...
• 2019-07-28 04:58:36

• jQuery クラスをSVGタグに追加、変更
• SVGタグにaddClassするとクラスが追加されないときの対応です。 SVGタグにクラス操作しようとすると反映しない場合ときがあります。 そのときは以下の内容を確認してみましょう。 [[$('svg').addClass('クラス名');]]...
• 2019-08-07 21:15:52

• jQuery パララックス　簡易版
• パララックスとは、視差効果を使って奥行きを出す表現のことです。 よくいろんなサイトで使われるのは、マウスやスクロールによって、要素が時間差で動くこと...
• 2019-08-07 17:44:53

• jQuery HTMLの属性を指定して編集
• HTML内にはいろんなタグがあり、それぞれ属性と値があります。 jQueryではid、class、href、src、titleなどの属性の値を編集することができます。 [[$('#l...
• 2019-08-07 17:04:56