[JQ権威ガイド]animate()メソッド
5574 ワード
定義と使用法animate()メソッドでCSSプロパティセットのカスタムアニメーションを実行します.この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).注記:「+=」または「-=」を使用して相対アニメーション(relative animations)を作成します.文法1$(selector).animate(styles,speed,easing,callback)
パラメータ記述stylesが必要です.アニメーション効果を生成するCSSスタイルと値を指定します.使用可能なCSSスタイルの値(インスタンスを指定): backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent注記:CSSスタイルでは、CSS名(font-sizeなど)ではなくDOM名(fontSizeなど)を使用して設定します.speedはオプションです.アニメーションの速度を指定します.デフォルトは「normal」です.可能な値:ミリ秒(たとえば1500)「slow」「normal」「fast」easingはオプションです.異なるアニメーションポイントでアニメーション速度を設定するeasing関数を指定します.内蔵のeasing関数:swing linear拡張プラグインでは、より多くのeasing関数が提供されます.callbackはオプションです.animate関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.文法2$(selector).animate(styles,options)パラメータはstyles必須を記述する.アニメーション効果を生成するCSSのスタイルと値(同上)を指定します.optionsはオプションです.アニメーションの追加オプションを指定します.可能な値:speed-アニメーションの速度を設定easing-使用するeasing関数callbackを指定-アニメーションが完了した後に実行する関数stepを指定-アニメーションの各ステップが完了した後に実行する関数queue-ブール値を指定します.効果キューにアニメーションを配置するかどうかを示します.falseの場合、アニメーションはすぐにspecialEasingを開始します.stylesパラメータからの1つ以上のCSSプロパティのマッピングと、対応するeasing関数
パラメータ記述stylesが必要です.アニメーション効果を生成するCSSスタイルと値を指定します.使用可能なCSSスタイルの値(インスタンスを指定): backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent注記:CSSスタイルでは、CSS名(font-sizeなど)ではなくDOM名(fontSizeなど)を使用して設定します.speedはオプションです.アニメーションの速度を指定します.デフォルトは「normal」です.可能な値:ミリ秒(たとえば1500)「slow」「normal」「fast」easingはオプションです.異なるアニメーションポイントでアニメーション速度を設定するeasing関数を指定します.内蔵のeasing関数:swing linear拡張プラグインでは、より多くのeasing関数が提供されます.callbackはオプションです.animate関数の実行が完了したら、実行する関数.callbackの詳細については、jQuery Callbackの章を参照してください.文法2$(selector).animate(styles,options)パラメータはstyles必須を記述する.アニメーション効果を生成するCSSのスタイルと値(同上)を指定します.optionsはオプションです.アニメーションの追加オプションを指定します.可能な値:speed-アニメーションの速度を設定easing-使用するeasing関数callbackを指定-アニメーションが完了した後に実行する関数stepを指定-アニメーションの各ステップが完了した後に実行する関数queue-ブール値を指定します.効果キューにアニメーションを配置するかどうかを示します.falseの場合、アニメーションはすぐにspecialEasingを開始します.stylesパラメータからの1つ以上のCSSプロパティのマッピングと、対応するeasing関数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript" src="../jquery-2.1.4.js"> </script>
<style type="text/css"> div{ border: solid 1px #666; background-color:#eee; width:50px; height:50px; font-size:13px; padding:5px} </style>
<script type="text/javascript" > $(function(){ $("div").click(function(){ $(this) .animate({height:100},"slow") .animate({width:100},"slow") .animate({height:50},"slow") .animate({width:50},"slow") }) }) </script>
</head>
<body>
<div> </div>
</body>
</html>