淡出使用jQuery的跨度标签的背景颜色
-
06-09-2019 - |
题
我试图淡化使用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'); });
});
不强> jQuery用户界面 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);
}