使用JQuery淡化span标记的背景颜色

Question

我正在尝试使用JQuery淡化span标记的背景颜色,以强调何时发生更改.我认为代码会像点击处理程序中的以下内容一样,但我似乎无法让它工作.你能告诉我哪里出错了吗？谢谢Russ.

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

---

这样更好,但现在它也会消除span标记的背景颜色和span标记的文本值.我试图淡化背景颜色并使文本可见.可以这样做吗？

Answer 1

它可以使用颜色动画插件完成.然后你会做类似的事情

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

Answer 2

哦,我没有意识到你想要褪色!好的,所以你需要查看jQuery颜色插件:

http://plugins.jquery.com/project/color

https://github.com/jquery/jquery-color/

这是jQuery docs网站的另一个有用的部分:

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

我从来没有真正做到这一点,所以我不会试图给你代码,但我想彩色插件将为您提供所需的功能.

Answer 3

如果使用纯jQ淡出背景在没有插件的情况下不起作用,那么使用CSS3有一种聪明的(虽然不是逐步增强的)方法.

此函数将通过CSS将"transition"属性应用于给定元素.接下来,该元素将被赋予CSS淡入的背景颜色.

如果你想让它像波浪一样("看这里!"),在延迟半秒后,一个函数排队等待将元素转回白色.

基本上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 4

这可以使用jQuery(或任何lib)和一个简单的CSS hack来完成:

#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/