Question

我有<td>。它有一个应用的类，它指定了一个背景颜色。我可以淡入不同的类，它只有不同的背景颜色吗？类似的东西：

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

.class2 {
  background-color: green;
}

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

由于

Answer 1

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

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

Sample here.

Answer 2

你可以这样做：

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

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

Answer 3

你可以在它上面放一个克隆，并在褪色克隆时将原始文件淡出。

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

以下示例代码将在每次点击时在两个类之间保持淡出：

$(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 example

<强> .toggleClass()
的 .offset()
的 .fadeIn()
的 .fadeOut()

淡入一堂课？

3 个答案:

的 jsFiddle example