jQuery的切換動畫不能正常工作

嘿所以我試着讓這個盒子動畫了，然後當你再次點擊動畫回到它原來的位置，但它只是沒有在這裏工作在非工作的jsfiddle http://jsfiddle.net/fyP9A/67/jQuery的切換動畫不能正常工作

感謝很多

來源

2012-01-10 matture

你的CSS不夠具體。使.sky1div#sky.sky1使它工作。

來源

2012-01-10 17:11:46

您的JS小提琴的問題是#sky css代碼覆蓋.sky1類，由於CSS Selectors Priority。

我編輯了您的JS Fiddle並將#sky改爲.sky，因此.sky和.sky1具有相同的優先級，因爲.sky1稍後在CSS代碼中覆蓋.sky :)希望解決您的問題！

來源

2012-01-10 17:16:00

這完美的作品上的jsfiddle但是當我把它放到我的HTML的過渡是非常不連貫，有沒有動畫就變成了另一個類。難道我做錯了什麼？ – matture 2012-01-10 20:01:09

類更改之間的轉換附帶了JSFiddle上的jQuery UI。 [鏈接]（http://jqueryui.com/docs/toggleClass/）。既然你已經在你的小提琴上檢查過jqueryUI，我把它保存在我的小提琴中。你可以使用.animate（），但是你必須指定所有的值來改變並檢查哪一個是活動的。 – 2012-01-13 17:57:13

正如Kevin所說，您遇到了css specificity的問題。 #sky比.sky1具有更高的特異性，導致它無法正確計算。要解決這個問題，你需要創建一個比#sky高特異性的選擇，例如#sky.sky1應該做的伎倆

旁註：
你並不需要查詢DOM第二次在.click()，你可以simiply使用$(this)

$(function() { 
    $("#sky").click(function() { 
     $(this).toggleClass("sky1"); 
    }); 
});

Updated fiddle

來源

2012-01-10 17:18:13

這對jsfiddle完美的作品，但是當我把它放到我的html中時，過渡是非常不連貫的，沒有動畫就變成了其他類。難道我做錯了什麼？ – matture 2012-01-10 20:00:35

用您的實際代碼調整小提琴，我可能會進一步提供幫助。 – 2012-01-10 20:26:32

http://jsfiddle.net/fyP9A/78/ 它的工作完美的小提琴，但它並沒有在我的實際HTML動畫。 – matture 2012-01-10 20:28:12

jQuery的切換動畫不能正常工作

回答

相關問題