使用JQuery淡化span标签的背景色

2021/01/21 08:31 · jquery ·  · 0评论

我正在尝试使用JQuery淡化span标签的背景色,以强调发生更改的时间。我当时认为代码在单击处理程序中会像下面这样,但是我似乎无法使其正常工作。你能告诉我我哪里出问题了吗?谢谢拉斯。

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

更好,但是现在它同时使span标签的背景颜色和span标签的文本值都消失了。我正在尝试淡化背景颜色并使文本可见。能做到吗?

哦,我没有意识到您想淡化颜色!OK,所以您需要检查jQuery color插件:

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

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

这是jQuery docs网站的另一个有用的部分:

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

我从来没有真正做到过,所以我不会尝试给您代码,但我想颜色插件将为您提供所需的功能。

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

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

如果没有插件就无法使用纯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.
}

这可以通过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/

尝试这个

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

回答可能会晚一些,但可以直接解决您的问题。

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

简单。无需jqueryUI插件,第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);

这将使背景色变成灰色,然后逐渐变回原始颜色,我希望这有助于

这就是为什么在span标签上调用fadeOut的原因。要获得背景淡入淡出动画,您应该使用:

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

正如米沙克所指出的。另一种方法可能是这样的:

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

上面的代码将淡出整个span标签的50%,然后更改背景和fadeIn。它不是您想要的,但是创建了Decet动画而不依赖其他jquery插件;)

最新的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 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/

本文地址:http://jquery.askforanswer.com/shiyongjquerydanhuaspanbiaoqiandebeijingse.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!