*

独自のアニメーションを指定する animate()

公開日: : 最終更新日:2015/08/03 jQuery

animate()命令は、任意のCSSプロパティの
値を徐々に変更して、独自のアニメーションを作成できる命令です。

括弧内にはCSSプロパティ、アニメーションのスピード、
動き(easing)、コールバック関数を指定します。

$( セレクター ).animate( 値を変更したいCSSプロパティ,
スピード,動き,コールバック関数 )

animate()に設定できるプロパティは、width,opacityのように
数値(px,em,%)で表現できるものに限ります。
colorのように数値以外の物で指定するプロパティには、
この命令は動きません。

書き方はCSS()で複数のCSSプロパティを同時に設定する場合と
同じで、プロパティ名と値を「:」コロンで繋ぎ
「”」ダブルクォーテーションで囲みます。複数のプロパティは
グループセレクターのように「,」カンマで繋げます。

動きには「linear」/「swing」を設定できます。
linearは常に一定の速度で、swingははじめはゆっくり
後からはやい速度で変化をつけながら値を変更します。

実行結果はこちらです。画像をクリックすると、画像がスライドします。

スポンサードリンク

関連記事

catejQuery

表示状態を切り替える fadeIn()/fadeOut()

fadeIn()/fadeOut()は、文字通りです。 フェードイン・フェードアウトしながらHTM

記事を読む

catejQuery

フォーカスが外れたことを感知する。

前の記事のfocus()とは逆に、フォーム部品から フォーカスが外れた(選択されていない状態になっ

記事を読む

jQuery

ボタンにカーソルを乗せたとき色々と効果を付けてみる

今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら サンプ

記事を読む

catejQuery

透明度を少しづつ変更する fadeTo()

fadeTo()は、セレクターで指定した要素の 透明度(CSSのopacityプロパティ)を、設定

記事を読む

catejQuery

空間を最大限に使いトップページの画像をタブで切り替える。

今回、書くのは、 トップページに複数の作品を乗せたいときに、 スクロールさせず、画面上部に配置し

記事を読む

catejQuery

要素の表示・非表示を交互に切り替える toggle()

toggle()は、要素の表示・非表示を交互に 切り替える命令です。セレクターで指定した要素が

記事を読む

jQuery

HTMLの取得と変更

.explain{ width:380px; border-radius:18px

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の HTML要素を指定して、CSSやHTMLを変更・

記事を読む

jQuery

Masonryでギャラリーページを作ってみる

今回使用するjQueryプラグイン ●Masonry フレキシブルなレイアウトを生成するため

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑