【jQuery】遅延実行 – 数秒後にイベントを発生させる

queue()を使って遅延

遅延実行でdelayを使いたいけどaddClass()などだと遅延してくれない。
そんなときに下記のように設定するとちゃんと動いてくれる。

//一秒遅らせて実行
 $('.js-text').delay(1000).queue(function(){
     $(this).text("へんか!");
 });

setTimeout()でも同じような事が出来る。

こちらの方が普通なかんじかも。

//一秒後に実行
setTimeout(function(){
     $('.js-setTimeout').text("へんか!");
},1000);

実際の動き(queue setTimeout)

/*  クリックしたら1秒後に変化します
----------------------------------------------- */
$(".js-text").on('click',function(){
    //1秒後
  $('.js-text').delay(1000).queue(function(){
     $(this).text("へんか!");
  });

});

See the Pen OVdzaw by ziyudom (@ziyudom) on CodePen.

Deferredを使ってアニメーションに順序を付ける

遅延とはちょっと違うけどDeferredを使った順序づけのアニメーションができるのでメモ


var $deferredAnim = $.Deferred( function( deferredAnim ){

  //thenでファンクション名を繋げる  
  deferredAnim.then(anim_01)
  .then(anim_02)
  .then(anim_03)
  .then(anim_04)
  
});

//実行
$deferredAnim.resolve(); 

function anim_01 (){

  return $(".red").delay(1000).animate({
    "top": "+100"
  },1000);
}
function anim_02 (){
    $(".red").text("途中や!");
    $(".red").animate({
    "left": "+100"
  },1000)
}
function anim_03 (){
  $(".red").text("もうちょっとや");
  return $(".red").animate({
     "top": "0",
     "left": "200"
  },1000)

}
function anim_04 (){
  $(".red").text("ゴール屋で!");
}

サンプル

See the Pen xGBwJM by ziyudom (@ziyudom) on CodePen.

  • このエントリーをはてなブックマークに追加