25

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

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

这样更好，但现在它会同时淡化 span 标签的背景颜色和 span 标签的文本值。我试图只是淡化背景颜色并让文本可见。可以这样做吗？

4

12 回答 12

16

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

$('span').animate({'backgroundColor' : '#ffff99'});
于 2009-04-09T13:04:45.520 回答
10

哦，我不知道你想褪色！好的，所以你需要查看 jQuery 颜色插件：

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

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

这是 jQuery 文档网站的另一个有用部分：

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

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

于 2009-04-09T13:05:24.227 回答
10

如果使用纯 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.
}
于 2012-02-17T19:14:26.183 回答
9

这可以通过 jQuery（或任何库）和一个简单的 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/

于 2012-05-24T18:50:24.753 回答
4

试试这个

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);
于 2010-08-13T13:05:37.987 回答
3

可能会迟到回答，但可以直接解决您的答案。

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

简单的。不需要 jqueryUI 插件、3rd 方工具等等。

于 2012-04-23T15:14:56.180 回答
3

我不想使用插件所以为了淡入淡出背景，我将这个包含在 div 类中，以使其背景淡出

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

按钮单击中的jquery

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

这会将背景着色为浅灰色，然后淡化回原始颜色，我希望这会有所帮助

于 2014-02-07T08:56:10.530 回答
1

这就是你在 span 标签上调用 fadeOut 的原因。要获得背景淡入淡出动画，您应该使用：

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

正如mishac所指出的。另一种方式可能是这样的：

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

上面的代码将淡出到整个 span 标签的 50%，然后改变背景和淡入。这不是你要找的，而是创建一个不依赖于其他 jquery 插件的欺骗动画；）

于 2009-12-21T17:23:27.950 回答
1

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

至于那个要求在翻转时使背景透明以显示图像的人，像人们用来切换导航图像的普通 jQuery 图像翻转那样构建它不是更简单吗？

于 2011-01-07T08:24:59.777 回答
0

你会想要使用这个语法：

$("span").fadeOut("slow").css("background-color", "#FFFF99");
于 2009-04-09T12:52:29.030 回答
0

这就是我通过悬停为我的列表修复它的方式：

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'); });
});
于 2012-09-10T10:50:30.183 回答
0

另一个没有jQuery UI的解决方案https://stackoverflow.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);
}

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

于 2014-03-23T12:37:27.067 回答