jQuery

HaradaWebではWordPressの中にjQueryを組み込んでサイトを作ることもあります。
ここではWordPressで利用するjQueryのプログラムを中心に紹介しています。

スムーススクロールをjQueryで設定

スムーススクロールをWordPressのプラグインを使わずにjQueryで設定します。
この記事を書こうと思ったのは自分の頭の固さに笑えてしまったから。
参考にさせていただいたサイトに感謝します。

2018年11月3日 カテゴリー:jQuery

jQueryでHTMLの要素を並べ替えて順位付けする

jQueryの.sort().attr()を使ってHTMLの要素を並べ替えて順位付けします。
WP-Queryで取得したカスタムフィールドの情報を変数に格納してHTMLの表の<tr>に設定し、CSSidに数字を自動的に付与して、そのidの数字でjQueryを使って並べ替えを行い、順位付けします。

2017年8月5日 カテゴリー:jQuery

animateのwidthとtoggleで横スライドで要素を出現させるjQuery

要素が横からスライドで表示されるwidth: ‘toggle’について解説します。
.animate()に{ width: ‘toggle’ }を設定すれば指定した要素が左横からスライドして表示されます。

2017年4月28日 カテゴリー:jQuery

slideToggleでクリックするとコンテンツを出したり隠したりする簡単jQuery

クリックするとコンテンツが出たり隠れたりするというのをjQueryのslideToggleで作ってみました。
slideToggleは出たり隠れたりする時の動作が上から下へ、下から上へと見栄えが良いです。
コンテンツを消すというよりも隠すという感じがします。

2017年4月24日 カテゴリー:jQuery

fadeInとfadeOutでクリックするとコンテンツを出したり隠したりする簡単jQuery

クリックするとコンテンツが出る簡単な仕組みをjQueryのfadeInfadeOutを使って作ってみました。
要素をCSSで非表示させるのではなく、jQueryのfadeInとfadeOutで非表示にさせます。
結果的にはCSSのdisplay: none;になるのですが。詳しくはこのページをご覧ください。

2017年4月23日 カテゴリー:jQuery

toggleClassでクリックするとコンテンツを出したり隠したりする簡単jQuery

ページ内の「ここをクリック」等と書いてあるところをクリックするとコンテンツが出てくるというものをちょくちょく見ます。
それを今回はjQueryのtoggleClassで作ってみました。
toggleClassCSSのクラスを追加したり削除したりするので、CSSでdisplay: noneを設定して表示したり非表示にしたりする事でコンテンツを出したり隠したり、クリックする部分も変化させたりします。

2017年4月21日 カテゴリー:jQuery