jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

ちょっとしたメモです。jQueryでanimateをメソッドチェーンでつないでいく最中に、一カ所だけアニメーションを遅らせて実行させたいという時はdelayメソッドを使えばできます。結構使う機会がありそうなメソッドかと思います。ということで簡単な使い方とちょっとしたサンプルです。

[ads_center]

delayを使ってみる

以下はboxというクラス名のdiv要素を右→下→左→上と時計回りに一周した後に、div.boxの背景を変えて「sample」というテキストを表示させるサンプルです。

で、この時に最後の「左から上」に行くアニメーションにdelayをかけています。図にするとこんな感じです。

delayメソッドのサンプル

コードはこんな感じです。

JavaScript

$(function(){
    $('.move').click(function(){
        $('.box').animate({
            left: 200
        }, 1000)
        .animate({
            top: 100
        }, 1000)
        .animate({
            left: 0
        }, 1000).delay(1000)
        .animate({
            top: 0
        }, 1000, showtext);
    });
    var showtext = function(){
        setTimeout(function(){
            $('.box').css({
                background:'#ccc'
            },1000).text('sample');
        },2000);
    };
});

これで4番目のアニメーションの時に1秒間だけ遅れて実行されるようになります。

サンプル


delayはキューの実行を遅らせるので、アニメーション以外の処理を制御させたい場合はsetTimeoutなどを使えばいいみたいです。

なので、上記では一番最後に背景とテキストを追加する動作をsetTimeoutを使ってアニメーションが終了してから2秒後に実行するようにしてみました。delayでも試してみたんですが、さっぱり動きませんでした。以下の記事が参考になるかと思います。

関連記事

  1. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  2. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  3. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  4. JavaScript

    とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる

    とても簡単かつ軽量なjQueryのスライダー「jQuery Slide…

  5. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP