淡入一堂课？

Question

我有一个<td>.它有一个应用的类,它指定了一个背景颜色.我可以淡入不同的类,它只有不同的背景颜色吗？就像是:

// css
.class1 {
  background-color: red;
}

.class2 {
  background-color: green;
}

$('#mytd').addClass('green'); // <- animate this?

谢谢

Answer 1

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

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

这里有样品.

Answer 2

您可以将一个克隆放在它上面，然后使原始内容淡出，同时使克隆淡入。

\n\n

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

\n\n

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

\n\n

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

\n\n

jsFiddle 示例

\n\n

\n\n

.toggleClass()
\n \n \n.offset()
.fadeIn()
.fadeOut()

\n