Question

以下是plunker

$(document).ready(function(){
  $('#btn-animate').click(function(){
    animate();
  });
  $('#btn-remove').click(function(){
    $('.to-animate').removeClass('animate');
  });

  function animate(){
    $('.to-animate').removeClass('animate');
    $('.to-animate').addClass('animate');
  }
});

如果我点击＆＃34; ANIMATE＆＃34;按钮它添加了一个动画＆＃39; div的类和动画（改变颜色）。但是如果你再次点击它会尝试删除该类＆＃39; animate＆＃39;并将其添加回来，以便动画再次触发。

但它没有发生。奇怪的是，如果我点击＆＃34;删除＆＃34;按钮删除动画＆＃39;然后使用＆＃34; ANIMATE＆＃34;按钮添加它再次动画的类。

有人可以解释为什么第一个按钮无法提供所需的结果吗？每次点击＆＃34; ANIMATE＆＃34;我怎样才能触发动画？按钮？

Answer 1

通常情况下，浏览器不会重新绘制UI，直到所有javascript运行完毕并且大多数浏览器足够聪明，以便在第二次单击动画按钮后，DOM之前和之后相同，因此它不会做任何事情。

最简单的解决方案是删除该类，然后设置超时以在短暂延迟后将其添加回来。

function animate(){
    $('.to-animate').removeClass('animate');
    setTimeout(function(){$('.to-animate').addClass('animate');}, 10);
}

Answer 2

伙计，从我看到的，一切正常，我打开链接，那里也正常工作。

如果您检查该类是否存在而不是删除该怎么办？

function animate(){
    if(!$('.to-animate').hasClass('animate')){
        $('.to-animate').addClass('animate');
    }
}

Answer 3

jQuery已经有了满足您需求的课程。它被称为toggleClass

$(document).ready(function() {
  $('#btn-animate,#btn-remove').click(function() {
    $('.to-animate').toggleClass('animate');
});

Answer 4

不是从类中获取动画，而是使用jquery

进行动画

$(document).ready(function(){
  $('#btn-animate').click(function(){
    $(this).animate(
    "opacity":"0",
    // whatever animation you want in here
    }, 300);
});

单击按钮时的CSS动画

4 个答案: