jQueryでクリック(click)での、連打を防止して アニメーションが終わるまでクリックボタン無効にする

jquery-click
このエントリーをはてなブックマークに追加
PR

jQueryでスライドやらギャラリーを自作していると

画面の移り変わり、画像の入れ替え等にアニメーションを使うことが多いです

 

アニメーションが動いている間に

ボタンをクリックされてしまうと、連続して実行されたり

中断されたりで、意図しない動きを起こすことがあります

 

見栄え的にもブサイクです

そこで、アニメーションが終わるまでそのボタンを無効にして

アニメーションが終わったら再び、ボタンとして機能するように clickが出来るようにします

 

 

jQueryで連打を防止する

var click_flg = true;
$(".next").on('click',function(){
  
  if(click_flg){
    //ボタンを一旦無効に
    click_flg = false;

    //実行内容
    $(slide).animate(
      {'left':0},
      500,
      function() {
        //アニメーションが終わってから trueにするように指定
        click_flg = true;
      }
    );

  } else {
    return false;
  }

 

click_flgの値が true か false かで実行するかしないかをチェックします

初期値では var click_flg = true; で実行出来るようになっています

 

if を使って true か false かで動作を振り分けます

true ならば アニメーションを実行

false ならば何もしない

 

まずアニメーションを実行する前に クリックされたことで click_flg を false にします

これによって、クリックによるアニメーション実行を停止します

これで ボタンが無効になります

 

無効になったあとに アニメーションを実行します

そして、アニメーションが終わってから 再び click_flg を true にして

ボタンとしてクリック出来るように 有効にします。

 

 

ポイントはアニメーションの終わりとともに click_flg を true にしてやることです

幾つか同時に実行するアニメーションがある場合は、一番最後に終わるアニメーションに click_flg を true にするようにしてやれば OK

 

 

 

参考サイト

http://blog.livedoor.jp/iijima_web/archives/5521312.html

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)