【jQuery】hide() 與 fadeOut()

jQuery 的兩個動畫函式 hide() 與 fadeOut() 都具有隱藏效果。

需求是當游標滑入指定區域時，浮現該按鈕，點擊按鈕後可使按鈕180度旋轉。

實現旋轉方式是設定 CSS 的 transform 值， rotate( '旋轉度數' deg )。

若使用 hide() 與 show() 來實作隱藏與浮現效果，
元素隱藏之前的旋轉度數會被保留。

但使用 fadeOut() 與 fadeIn() 來實作的話，
旋轉度數的 CSS 效果會消失。

探究其原因，在於 fadeOut 與 fadeIn 會重寫 DOM element 的 style，
導致原本 style 內的 transform 值消失，因此無法保留旋轉度數。

順便紀錄一下觀察到的 hide() 與 fadeOut() 差異，
相同之處：

1. display值，設為none
2. opacity值，變更為0

相異之處：

1. hide() 會將 width 與 height 的值也變更為0，fadeOut() 不改變
2. hide() 會保留 style 內的 transform 值