10のjQueryスニペット

JavaScript

Webデザイナーが知っておくべき10のjQueryスニペット

すべてのWebデザイナーが知っておくべき10のjQueryスニペットがとても役立ちそうな感じがしたのでご紹介します。どれも簡単なコードで非常に実用的なことが書かれているのでjQueryを扱っている方は一度目を通しておくとよさそうですね。

[ads_center]

実用的で役立つコード集

10のjQueryスニペット

10 jQuery snippets every designer should know | Webdesigner Depot

以下は個人的にいいなーと思ったものです。

トップへ戻るボタン

色んなサイトでよく見かける機能ですね。文章の先頭にスクロールしながら戻ってくれます。

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class="top" href="#">Back to top</a>

画像の読み込みが失敗した時の置き換え

リンク切れなどといった画像が上手く読み込めない時に替わりの画像に置き換えてあげる処理。

$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});

divの高さを同じに揃える

これは覚えておきたいところ。

$('.div').css('min-height', $('.main-div').height());

こんな感じで役立つTipsがたくさんあります。これらの他にも、

  • 画像の読み込みをチェック
  • ホバー時にCSSを切り替え
  • 送信ボタンを無効
  • リンクの読み込みを停止
  • クリック時にフェード or スライド
  • シンプルなアコーディング
  • リストをストライプ模様

といったものがあるので興味がある人は一度チェックしてみてはいかがでしょうか。

関連記事

  1. PopCircle
  2. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  3. Accessible Mega Menu
  4. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  5. jQuery touchSwipe Carousel
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP