用JQuery淡出span标记的背景色

Question

我试图用JQuery淡出span标签的背景色，以强调更改发生时的情况。我在想，在单击处理程序中，代码可能会像下面这样，但我似乎无法让它工作。你能告诉我我哪里出错了吗？谢谢拉斯。

$("span").fadeOut("slow").css("background-color").val("FFFF99");

这是更好的，但现在它同时淡出了span标签的背景色和span标签的文本值。我试着淡出背景颜色，让文字可见。那能办到吗？

Answer 1

这可以用彩色动画插件来完成。然后你会做一些类似的事情

$('span').animate({'backgroundColor' : '#ffff99'});

Answer 2

如果使用纯jQ来淡出背景没有插件就不能工作，那么有一种聪明的(虽然不是逐步增强的)方法可以使用CSS3来实现这一点。

此函数将通过CSS将"transition“属性应用于给定的元素，然后，元素将被赋予CSS渐入的背景色。

如果您想让它像wave一样(“看看这里！”)，在延迟半秒钟之后，一个函数会排队，将元素转换为白色。

本质上，jQ只是将元素闪烁到一种颜色，然后返回到白色。CSS3负责处理衰落问题。

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

Answer 3

这可以用jQuery (或任何库)来完成&一种简单的CSS攻击：

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML：

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

然后，你要做的就是：

$("#fadeout-div").fadeOut(1100);

小菜一碟！参见实际操作：http://jsfiddle.net/matthewbj/jcSYp/