在jquery中运行动画之后激活添加类

问题描述：

我有一个敏感点击鼠标的div div。当用户点击这个div时，它将运行一个动画并转到页面顶部。我想在运行这个动画在这里另一个DIV后激活一类是我的代码：在jquery中运行动画之后激活添加类

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

而你的问题是......？请解释您当前的代码出了什么问题，并提供[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。也许你可以提供相关的HTML和CSS，但仅仅足以让我们能够重现这个问题，仅此而已 – blex

答

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函数回调函数，可以提供动画的完成。

完整

类型：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); 
     }); 
});

在jquery中运行动画之后激活添加类

相关推荐