WordPressでjQueryが動かないときに確認したい４つのポイント
jQueryはjavascriptを簡潔に書くためのライブラリでWeb開発には欠かせません。WordPressでもあらゆる箇所でjQueryが使われていますが、これを使ってオリジナルのスクリプトを書きたいと思った場合はいくつか注意点を守らないとスクリプト自体が動作しません。そこでここではjQueryが動かないときに特にありがちで気をつけなくてはならない４つの注意点について紹介します。
「 jQuery 」一覧
jQueryでページ内リンクをクリック時にスクロールさせる方法
ページ内リンクをクリックしたときにただリンク先までジャンプするのではなく、そのリンク先までスムーススクロールさせる処理を行うにはjQueryを使います。ここではjQueryを使ったスムーススクロールの実装とWordPress内でページ内リンクに対してスムーススクロールさせる方法を解説します。
jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法
Google検索のように何か入力されたときに検索ボックスの下にサジェストを一覧表示したい場合に便利なのがjQueryの「AutoCompelte」というウィジェットです。ウィジェットと言っても形のあるものではなく、既存の検索ボックスなどにGoogleのような自動補完機能を付け加えるためのものです。また実装するためのコードもそれほど複雑ではありません。そこでここではそのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説します。
クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】
インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。
jQueryで画像のフェードインとスライドダウンを同時に行う方法
jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に２つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。
CSSやjQueryで要素をアニメーションさせて表示する２つの方法
要素にフェードインなどのアニメ効果をつけながら表示するには２つ方法があります。１つめはjQueryのアニメ関数を使う方法で、２つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの２つのやり方で要素をアニメ表示する方法を解説します。
jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法
jQueryで要素をアニメーションさせるにはanimate関数が使われますが、この関数内ではtransformプロパティを時間に沿ってアニメーションさせることはできません。なので代わりにtransitionプロパティを要素に指定してアニメーションさせます。ここではその方法と移動・拡大・回転・傾斜アニメを要素につける方法を解説します。
jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法
jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。
WordPressでページ離脱時にアラートを出す方法【jQuery】
フォームの入力途中でページから離脱しようとしたときにアラートを出すとユーザーの利便性が高まります。WordPressでそのような離脱アラートを出すには編集画面でスクリプトを記述できるプラグインが必要です。ここではそのプラグインの使い方とjQueryでページ離脱時にアラートを表示する方法について解説します。
jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法
CSS3では要素にアニメーション効果をつけるアニメーションプロパティを使うと要素に対して様々なアニメーション効果をつけられるようになりました。ここではそのアニメーションプロパティとjQueryを使って１つ１つの文字がばらばらに上下に揺れるようなアニメーション効果をつける方法について解説します。