在jquery中運行動畫之後激活添加類

Question

我有一個敏感點擊鼠標的div 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); 
     }); 
});