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 狭いエリアに文字をアニメで格納する
• 文字列を動的に埋め込むとき、デザインの都合上、どうしても横幅に 制限あるときがよくある。そんな時に使ってほしいサンプルがこちら。 スマホなどの横幅が狭い画面で、人の名前や地名など動的に入ってくる文字を設置したいことがあります。 そんなときサーバーサイドで文字を切って「…...
• 2020-01-27 00:36:08

• jQuery 消去法のUI
• 一覧になっている要素をユーザの操作で削除するUIのサンプルです。 ニュースやECなど閲覧の傾向からレコメンドされることはありますが、私はそのおすすめが気に入らないことがよくあります。 裏でいろいろな仕組みが動いて、最...
• 2019-08-07 23:58:46

• jQuery 同じ処理の部分だけまとめる
• 多数の要素に同じ処理を書くとソースが増えて、ちょっとした修正もコピペ祭りになってしまいます。そんなときはaddメソッドが便利。 まずこのようなサンプルを用意しました。 ３つの要素にアニメーションをjQueryでつけています。 demo1 demo2 demo3 動きが終わっ...
• 2019-07-30 22:17:10

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

• jQuery 要素のスライド
• 左右のボタンをクリック、タップすると要素が左へ移動します。スワイプにも対応しました。 複数のテキストや画像を並べて表示する場合、そのまま並べてしまうと画面が埋まってしまいます。 そんな時のサンプルです。 高さや幅を固定して、はみ出す...
• 2019-07-28 17:21:54

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

• jQuery スムーズスクロール
• jQueryを使ってページ内を上下にスムーズにスクロールさせるボタンを設置します。 こちらのボタンをクリックしてください。 真ん中までスクロール↓ 一...
• 2019-08-02 23:51:29

• jQuery カードをめくる表現
• 主にjQueryで書かれたアニメーションです。 画像をクリックすると、カードを裏返すようなエフェクトのサンプルです。 クリックで発動するものと、ページが表示されると自動で発動する２パターン用意しま...
• 2019-07-28 14:02:54

• jQuery ドロワーメニュー
• jQueryを使って、クリックするとサイドにメニューがアニメーションで現れるドロワーメニューの一例を紹介します。
• 2019-08-01 22:29:03

• JS 棒グラフ
• 棒グラフを３種類紹介します。 jQeueryを利用してHTMLとCSSで作成したもの。 SVGを利用したもの。 Chart.jsを利用したもの。 どれも扱いやすく、自...
• 2019-08-01 08:27:33