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. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  4. Docked Link jQuery Plugin
  5. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  6. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP