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. Blindify
  2. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  3. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  4. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  5. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  6. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP