淡出使用jQuery的跨度标签的背景颜色

StackOverflow https://stackoverflow.com/questions/734068

题

我试图淡化使用JQuery时改变已发生强调的跨度标签的背景色。我想代码会像成才点击处理程序中以下，但我似乎无法得到它的工作。你能告诉我在哪里出了错？ 感谢拉斯。

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

这是更好的，但是现在它消失span标记的两种背景色和太跨度标签的文本值。我想刚刚褪去的背景色和留下的文字中。可以在做什么？

有帮助吗？

解决方案

呵呵，我不知道你想褪色的颜色！ OK，所以你需要检查出的jQuery插件颜色：

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

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

和这里的jQuery的文档场的另一个有用的部分：

http://docs.jquery.com/Release:jQuery_1.2 /效果＃Color_Animations

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

其他提示

它可以与彩色动画插件来完成。然后你会做这样的事情。

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

如果使用纯JQ淡出一个背景不无需插件工作，有一个聪明（尽管不是逐步增强）方式与CSS3做到这一点。

此功能将应用“过渡”属性通过CSS给定元素 接着，将元件被给予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.
}

此可以与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>

然后，所有你需要做的是：

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

易peasy！看到这个动作： http://jsfiddle.net/matthewbj/jcSYp/

尝试此

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

可能来不及回答，而是直线解决您的答案。

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

简单。无需jQueryUI的插件，第三方工具和所有的。

我没有想使用插件 所以淡入背景进出我包括在本对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);

这将色彩背景浅灰色，然后褪色回到原稿颜色 希望这有助于

这就是为什么你叫上淡出span标签。获得背景的动画渐变，你应该使用：

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

如通过mishac指出。另一种可能是这样的：

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

上面的代码将淡出到50％的整个范围标记，然后改变背景和淡入。它是不是你要找的人，但没有其他的jQuery插件根据创建decet动画;）

在最新的jQuery UI的业务可以让你做背景颜色变换的大多数对象。 在这里看到： http://jqueryui.com/demos/animate/

对于家伙询问制作背景透明上翻车，以显露影像岂不是更简单的构建它像一个正常的jQuery图像翻车喜欢的人用它来切换导航图像的人？

您需要使用这个语法：

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

这是我如何修复它为我的清单，悬停：

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'); });
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top