淡入一堂课？

我有一个

。 它有一个应用的类，它指定了一个背景颜色。 我可以淡入不同的类，它只有不同的背景颜色吗？ 就像是：

 // css .class1 { background-color: red; } .class2 { background-color: green; } $('#mytd').addClass('green'); // <- animate this? 

谢谢

Answer 1

您可以在其上放置一个克隆并在将克隆淡入时将原始文件淡出。

完成淡入淡出后，您可以切换回原始元素…确保在淡化回调中执行此操作！

下面的示例代码将在每次单击时在两个类之间保持淡入淡出：

 $(function(){ var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset(); // Create clone w other bg and position it on original $elie.toggleClass("class1, class2").appendTo("body") .offset({top: os.top, left: os.left}).hide(); $("input").click(function() { // Fade original $mytd.fadeOut(3000, function() { $mytd.toggleClass("class1, class2").show(); $elie.toggleClass("class1, class2").hide(); }); // Show clone at same time $elie.fadeIn(3000); }); });​ 

jsFiddle示例

.toggleClass()
.offset()
.fadeIn()
.fadeOut()

Answer 2

jQueryUI特别为此扩展了animate类。 您可以不使用原始参数将新类附加到对象。

 $(".class1").switchClass("", "class2", 1000); 

这里有样品。

Answer 3

你可以这样做：

 $("#mytd").fadeOut(function() { $(this).removeClass("class1").addClass("class2").fadeIn(); }); 

另外，看看这里： jQuery动画backgroundColor （同样的问题，很多答案）

Answer 4

这个问题很老了; 但对于需要更好解决方案的人来说; 看到：

http://jsfiddle.net/kSgqT/

它使用Jquery和CSS3来切换 class同时在以下class中淡化:-)

HTML：

 
Hover Me
 
Highlight Me 

JavaScript

 $('#pseudo-hover').hover( function() { $('#pseudo-highlight').toggleClass('highlight'); });