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的切换动画不能正常工作

回答

相关问题