用JQuery淡出span标记的背景色

I'm trying to fade the background-color of a span tag using JQuery to emphasize when a change has occured. I was thinking the code would be someting like the following inside the click handler, but I can't seem to get it working. Can you show me where I went wrong? Thanks Russ.

我试着用JQuery淡出span标记的背景色，以便在发生更改时强调这一点。我想代码应该是类似于点击处理程序中的以下内容，但是我似乎不能让它工作。你能告诉我哪里出错了吗?谢谢拉斯。

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

That's better, but now it fades both the background-color of the span tag and the text value of the span tag too. I'm trying to just fade the background-color and leave the text visible. Can that be done?

这样更好，但是现在它将span标记的背景色和span标记的文本值都退色。我试着把背景色淡入，让文字可见。这个可以做吗?

12 个解决方案

#1

OH, I didn't realize you wanted to fade the color! OK, so you need to check out the jQuery color plugin:

哦，我没意识到你想退色!好的，你需要看看jQuery颜色插件:

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

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

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

And here's another helpful section of the jQuery docs site:

下面是jQuery文档站点中另一个有用的部分:

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

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

I've never actually done this so I won't try to give you code, but I imagine the color plugin will give you the functionality you need.

我从来没有这样做过，所以我不会给你代码，但是我想颜色插件会给你你所需的功能。

#2

It can be done with the color animation plugin. You'd then do something like

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

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

#3

If using pure jQ to fade out a background doesn't work without a plugin, there's a clever (although not progressively enhanced) way to do this with CSS3.

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

This function will apply the "transition" attribute to a given element via CSS Next, the element is given a background color which CSS fades into.

这个函数将通过CSS将“transition”属性应用到一个给定的元素中。接下来，元素将被赋予一个背景颜色，CSS将其淡入其中。

In case you want this to be like a wave ("look here!"), after a delay of half a second, a function is queued to turn the element back to white.

如果您希望它像一个wave(“看这里!”

Essentially jQ just blinks the element on to one color, then back to white. CSS3 takes care of the fading.

本质上，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.
}

#4

This can be done with jQuery (or any lib) & a simple CSS hack:

这可以用jQuery(或任何lib)实现&一个简单的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>

Then, all you need to do is:

那么，你需要做的就是:

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

Easy Peasy! See this in action: http://jsfiddle.net/matthewbj/jcSYp/

容易Peasy !请参见下面的操作:http://jsfiddle.net/matthewbj/jcSYp/。

#5

Try this

试试这个

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

#6

May be late to answer, but a straight solution to your answer.

也许回答得太晚了，但你的答案是直截了当的。

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

Simple. No need of jqueryUI plugin, 3rd party tools and all.

简单。不需要jqueryUI插件，第三方工具等等。

#7

I didnt want to use a plugin So to fade a background in and out i included this for the div class thats to have its background faded

我不想使用插件来淡出背景我为div类添加了这个，它的背景已经褪色了

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

the jquery which is in a button click

在按钮中单击的jquery

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

This will color the background light grey and then fade back to the orig color I hope this contributes

这将使背景颜色浅灰色，然后淡回到orig颜色我希望这能有所帮助

#8

that's why you call fadeOut on the span tag. to get background fade animation you should use:

这就是为什么要在span标记上调用fadeOut。要获得背景渐隐动画，你应该使用:

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

as pointed by mishac. another way could be something like this:

mishac所指出的。另一种可能是这样的:

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

the above code will fadeout to 50% the entire span tag, then changes background and fadeIn. it isn't what you were looking for, but creates a decet animation without depending from other jquery plugins ;)

上面的代码将fadeout到50%的整个span标签，然后改变背景和fadeIn。它不是你想要的，而是在不依赖其他jquery插件的情况下创建一个decet动画;

#9

The newest jQuery UI business allows you to do background-color transforms on most objects. See here : http://jqueryui.com/demos/animate/

最新的jQuery UI业务允许您在大多数对象上进行背景色转换。在这里看到的:http://jqueryui.com/demos/animate/

As for the guy asking about making a background transparent on roll-over to reveal an image would it not be simpler to build it like a normal jQuery image roll-over like the ones people use to switch nav images?

对于那些要求在rollover上透明地显示背景的人来说，像普通的jQuery图像翻卷一样，像人们用来切换导航图像的那样，构建它不是更简单吗?

#10

You'll want to use this syntax:

您需要使用以下语法:

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

#11

This is how I fixed it for my list with a hover:

这就是我如何用鼠标悬停在列表上的方法:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

#12

Another solution without jQuery UI https://*.com/a/22590958/781695

另一个没有jQuery UI的解决方案是https://*.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Demo : http://jsfiddle.net/5NB3s/3/

演示:http://jsfiddle.net/5NB3s/3/

#1