單擊按鈕即可獲得CSS動畫

Question

這是the 子

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

在這里，如果我單擊“動畫”按鈕，它將為div添加一個“動畫”類並對其進行動畫處理（更改顏色）。 但是，如果再次單擊，它會嘗試刪除“動畫”類並將其重新添加，以便動畫再次觸發。

但這沒有發生。 奇怪的是，如果我單擊“刪除”按鈕以刪除“動畫”類，然后使用“動畫”按鈕添加該類，則它將再次進行動畫處理。

誰能解釋為什么第一個按鈕無法提供所需的結果？ 每次單擊“動畫”按鈕時如何觸發動畫？

Answer 1

通常，瀏覽器直到所有javascript完成運行后才重繪UI，並且大多數瀏覽器足夠聰明，以至於在第二次單擊動畫按鈕之后，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);
});