jQueryでアニメーションを行う

jQueryでアニメーションを行うには、animate()メソッドを使います。

$("任意のセレクタ").animate(
    {
        // アニメーションさせたいCSSプロパティと変化量を指定する
        // 変化量は変化後の値を指定するか、"toggle" を指定することができる
        (プロパティ) : (変化),
        (プロパティ) : (変化),
        (プロパティ) : (変化),
        ...
        (プロパティ) : (変化)
    },
    {
        duration : (長さ), // 変化にかける時間 ("slow" | "normal" | "fast" | ミリ秒)
        easing : (変化する過程), // 変化の仕方を指定 ("linear" | "swing")
        complete : (完了した時に呼び出されるの関数),
        step : (変化中に呼び出される関数), // 引数が一つあり、現在の変化量を示す
        queue : (true | false) // アニメーションをキューイングするかどうか (false : 即時実行)
    }
);

少し複雑かもしれないので、実際に例を示します:

$(".sample0").animate(
    {
        width : "toggle"
    },
    {
        duration : "slow",
        easing : "swing",
    }
);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です