在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); 
     }); 
});