淡入一堂课? [英] Fade a class in?

问题描述

我有一个<td>.它应用了指定背景色的类.我可以淡入另一个具有不同背景颜色的类吗?像这样:

I've got a <td>. It has a class applied which specifies a background color. Can I fade-in to a different class, which just has a different background color? Something like:

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

.class2 {
  background-color: green;
}

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

谢谢

推荐答案

您可以在其顶部放置一个克隆，并在使克隆淡入时淡出原始克隆.

You could put a clone on top of it and fade the original out while fading the clone in.

淡入淡出之后，您可以切换回原始元素...请确保在淡入淡出回调中做到这一点！

After the fades are done, you could switch back to the original element... make sure to do this in the fades callback!

下面的示例代码将在每次单击时使两个类之间逐渐消失:

The example code below will keep fading between the two classes on each click:

$(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示例

jsFiddle example

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

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

这篇关于淡入一堂课?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！