在jquery中运行动画后激活add类

activate add class after running an animate in jquery

本文关键字：激活 add 动画 jquery 运行      更新时间：2023-09-26

我有一个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);
      });
  });

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

jQuery animate有一个可选的complete函数回调，可以为动画的完成提供。

类型:功能()

动画完成后调用的函数，每个匹配的>元素调用一次。

$(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);
      });
});
相关文章：