jQuery の英文マニュアル : .animate() – jQuery API ページのサンプル (Basic Usage)をもう少し解りやすく変更したものです。二つ以上の効果を同時実行( 数値プロパティに対して )All animated properties should be animated to a single numeric value, プロパティは数値である事。 width, height, or left can be animated but background-color cannot be. 幅や高さや位置情報はアニメーションできるが、背景色は不可 Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. 通常は、ピクセルが利用されるが、em や % も利用可能 In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated. CSS で無い scrollTop と scrollLeft は動作します Shorthand CSS properties (e.g. margin, background, border) are not supported. margin, background, border のような一度に複数指定できるものは サポート外 In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. 数値プロパティでは、show、hide、toggle が利用可能。 Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters += と -= で現在の値よりの相対指定が可能と、だいたいを読んで以下のサンプルで試しています。100% 使うと、DIV 枠に 適合するようなサイズになったりします
<script>
if ( !window.jQuery ) {
document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
</script>
<input type="button" value="アニメーション" onclick='jqAction()'>
二つ以上の効果を同時実行( 数値プパティに対して )
<div style='position:relative;height:150px;'>
<img
id="target"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
'
/>
</div>
<script type="text/javascript">
function jqAction() {
$('#target').animate(
{
// あるものを 0 にしたり、無いものを元に戻します
// ( いったん見えなくなります )
opacity: 'toggle',
width: '-=200'
},
2000,
function() {
// 見えなくなった後、元へ戻します
$('#target').animate(
{
opacity: 'show',
width: '+=200'
},
2000
);
}
);
}
</script>
<input type="button" value="フェードアウト/フェードイン" onclick='jqAction2()'>
<div style='position:relative;height:150px;'>
<img
id="target2"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
visibility: "visible"
'
/>
</div>
<script type="text/javascript">
function jqAction2() {
// 見えなくなくなります
$('#target2').fadeOut(
2000,
function() {
// 見えなくなった後、元へ戻します
$('#target2').fadeIn(2000);
}
);
}
</script>
If the easing argument is not defined, the default swing function is used. easing は、アニメーションのパターンですが、通常ライブラリでは、swing と linear のみのようで、増やしたい場合は プラグインを使用する必要があるみたいです。デフォルトは、swing になり、animation ではプロパティ毎に配列で easing を指定できると書いてあります。 width: ['toggle', 'swing'] こんな感じですね 関連する記事 jQuery の easing の追加
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
