jqueryでアニメーションを実行した後にクラスを追加する

Question

マウスクリックに敏感なdivウィッチがあります。ユーザーがこのdivをクリックするとアニメーションが実行され、ページの先頭に移動します。それは私のコードで私はここに別のdivにこのアニメーションを実行した後、クラスをアクティブにする：

$(document).ready(function() { 
     $(".data-lock").click(function() { 
      $(this).animate({ 
       bottom: '50%' 
      }); 
      $("back-img").addClass("lock-up"); 
      setTimeout(function() { 
       $(".data-lock").animate({ 
        bottom: '0' 
       }); 
       $("back-img").removeClass("lock-up"); 
      }, 30000); 
     }); 
    }); 

Answer 1

アニメーション終了後に呼び出される完全な方法で、受信できるjQueryの.animate()方法：

$(document).ready(function() { 
     $(".data-lock").click(function() { 
      $(this).animate({ 
       bottom: '50%' 
      }, function() { 
       $("back-img").addClass("lock-up"); 

       setTimeout(function() { 
        $(".data-lock").animate({ 
         bottom: '0' 
        }, function() { 
        $("back-img").removeClass("lock-up"); 
        }); 
       }, 30000); 
      }); 
     }); 
    }); 

Answer 2

をjQuery animateには、アニメーションの仕上げのために提供できるオプションのcomplete関数コールバックがあります。

完全

型：Function（）

アニメーションがマッチ>要素ごとに一度と呼ばれる、完了した時点で呼び出す関数。

$(document).ready(function() { 
     $(".data-lock").click(function() { 
      $(this).animate({ 
       bottom: '50%' 
      }, function() { 
       $("back-img").addClass("lock-up"); 
      }); 

      setTimeout(function() { 
       $(".data-lock").animate({ 
        bottom: '0' 
       }, function() { 
        $("back-img").removeClass("lock-up"); 
       }); 
      }, 30000); 
     }); 
});