jquery按鈕淡出與背景圖像行事奇怪

我想通過使用toggleClass方法使一個按鈕淡入另一個類。這似乎工作正常，直到我將類背景圖像引入。jquery按鈕淡出與背景圖像行事奇怪

我甚至不確定它在做什麼。它似乎取決於鼠標在按鈕上的位置。無論如何，按鈕排序開始淡化，可能只是背景顏色而不是圖像，然後在完成動畫後在背景中「彈出」。我在這裏重現它：

所以我的問題是..我怎樣才能使整個事情褪色？

2012-03-05 Sackling

我認爲這是類似於：http://stackoverflow.com/questions/808790/jquery-fade-background-on-hover - 你試圖淡出背景 – JMax 2012-03-05 15:08:58

它被認爲是好的形式（並會讓你高高質量的答案），以便在問題中提供代碼，而不僅僅是在小提琴外部。格式化以提高可讀性在這兩個地方也是受歡迎的（即不僅僅是長單行CSS塊） – 2012-03-05 15:14:59

抱歉，不知道在這裏發佈代碼以及..我認爲這兩者之一。我將編輯該問題。我也會刪除不必要的CSS。 – Sackling 2012-03-05 15:16:51

你不能在類之間真的淡入淡出。一個元素有一個類，或者它沒有。

2012-03-05 15:08:36

我不認爲這會很難寫。它現在不是它的工作方式，我也不認爲它應該如何工作。 – 2012-03-05 15:15:35

我實際上已經在使用jQuery UI了，所以我試過了toggleClass，結果也是一樣。 – Sackling 2012-03-05 15:24:27

是的，我誤解了您的原始問題;我刪除了我以前的評論，因爲他們在這方面沒有意義。 toggleClass實際上應該（根據文檔）做到這一點，但是當你轉換這些很多樣式時，其中許多都帶有供應商前綴，我不驚訝它失敗。 – 2012-03-05 15:27:08

而不是嘗試切換類，只需切換該類的屬性。假設你沒有做太多瘋狂的事情，那應該很簡單。

2012-03-05 15:26:32

你不能沒有color plugin

2012-03-05 15:31:47

動畫顏色值是的，你可以不褪色成類，但有可能一招

$('button').on("mouseenter",function(){ 
    $(this).fadeOut(100).toggleClass("ui-state-hover").fadeIn(100); 
});

這裏是一個demo。基本上，這個想法是淡出，然後切換課程並再次顯示。

檢查this演示假背景，當按鈕淡出和英寸我希望你會做這些演示你想要的。

2012-03-05 15:37:47 Starx

這種有點sorta工程..但不夠好..它必須完全淡出之前開始淡入，所以它看起來像是「閃爍」一瞬間。 – Sackling 2012-03-05 15:45:55

哇，不夠好。你在聽我的老闆。主席先生，我不適合你。但我很酷，你可以隨時添加背景圖片來僞造它。我將創建一個小提示向您展示。 – Starx 2012-03-05 15:53:15

@Sackling，檢查更新，你可以從上面的代碼中刪除'100'並用'0'替換，如果你不想閃爍直接來。 – Starx 2012-03-05 15:58:30

回答