我正在尝试使用JQuery淡化span标记的背景颜色,以强调何时发生更改。我认为代码会像点击处理程序中的以下内容一样,但我似乎无法让它工作。你能告诉我哪里出错了吗? 谢谢Russ。
$("span").fadeOut("slow").css("background-color").val("FFFF99");
这样更好,但现在它也会消除span标记的背景颜色和span标记的文本值。我试图淡化背景颜色并使文本可见。可以这样做吗?
答案 0 :(得分:16)
可以使用color animation plugin完成。然后你会做类似
的事情$('span').animate({'backgroundColor' : '#ffff99'});
答案 1 :(得分:10)
哦,我没有意识到你想要褪色!好的,所以你需要查看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
我从来没有真正这样做过,所以我不会尝试给你代码,但我想彩色插件会为你提供所需的功能。
答案 2 :(得分: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.
}
答案 3 :(得分:9)
这可以通过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/
答案 4 :(得分:4)
试试这个
$(this).animate({backgroundColor:"green"}, 100);
$(this).animate({backgroundColor:"white" }, 1000);
答案 5 :(得分:3)
可能要迟到才能回答,但直接解决了你的问题。
$('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});
简单。不需要jqueryUI插件,第三方工具等等。
答案 6 :(得分:2)
我不想使用插件 因此,要淡入淡出背景,我将其包含在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);
这会将背景颜色为灰色,然后淡化为原色 我希望这有助于
答案 7 :(得分:1)
这就是你在span标签上调用fadeOut的原因。要获得你应该使用的背景淡入淡出动画:
$('span').animate({'backgroundColor' : '#ffff99'});
正如mishac指出的那样。另一种方式可能是这样的:
$("span").fadeTo(0.5,"slow", function () {
$(this).css("background-color", "#FFFF99");
$(this).fadeIn("slow");
});
上面的代码将淡出到整个span标签的50%,然后更改background和fadeIn。它不是你想要的,但创建一个decet动画,而不依赖于其他jquery插件;)
答案 8 :(得分:1)
最新的jQuery UI业务允许您对大多数对象进行背景颜色转换。 见这里:http://jqueryui.com/demos/animate/
对于要求在翻转时使背景透明以显示图像的人来说,像普通的jQuery图像翻转一样构建它并不像人们用来切换导航图像那样简单吗?
答案 9 :(得分:0)
您需要使用以下语法:
$("span").fadeOut("slow").css("background-color", "#FFFF99");
答案 10 :(得分: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'); });
});
答案 11 :(得分: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);
}