我想使用.attr改變鏈接的動畫CSS更改

Question

我有這段腳本改變CC，但改變是瞬時的，我想動畫它（使其平滑），任何如何實現這個想法？

腳本：

$(document).ready(function(){ 
    var css = 'x'; 
    $('#button').button(); 
    $('#button').click(function() { 
     if (css == 'x') { 
      $('#button').button('option', 'label', 'change to css x'); 
      $('link[href="css/x.css"]').attr('href', 'css/y.css'); 
      css= 'y'; 
     } 
     else if (css== 'y') { 
      $('#button').button('option', 'label', 'change to css y'); 
      $('link[href="css/y.css"]').attr('href', 'css/x.css'); 
      css= 'x';   
     } 
    }); 
}); 

Answer 1

它可能會被認爲是不好的做法，但你可以嘗試暫時補充：

* { 
    transition: all ease-in-out 1s; 
} 

然後，執行你的CSS改變，然後刪除該規則。

我沒有測試它，它可能根本不起作用。只是一個想法。