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でも試してみたんですが、さっぱり動きませんでした。以下の記事が参考になるかと思います。

iPhoneの画像編集アプリ「Filterstorm」を使ってみた前のページ

WordPressでアイキャッチ画像を使う場合のサイズ設定や画像ありなし時の振り分けなど次のページ

最近の記事

  1. CIO Mate Magnet Stand
  2. 抹茶クリームドーナツ
  3. FAST
  4. クリスマスブレンド
  5. ホワイトチョコマカダミアドーナツ
PAGE TOP