jquery - 如何在特定事件上对 JQuery 中的标签颜色进行动画处理？

Question

我一直在尝试改变 JQuery 中标签的颜色。我能做的最多就是更改标签内文本的颜色。请找到我尝试过的以下代码。

标签代码:

<input type='radio' name='specific_consultant' id='test1' value='no'>No</input>

JQuery 函数

$(document).ready(function() {
    var button = $('#test1');
    button.click(function() {
        button.css('color', 'FOO');
    });
});

但是我如何更改特定事件的标签颜色，例如 this它在标签中显示结果？

Answer 1

不需要完全是一个标签。您可以使用<div>并设置样式inline-block然后设置背景颜色:

CSS

.result{
    background-color: #F00;
    display: inline-block;
    /* transition effect */
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

html

<div class="result"></div>s

JavaScript

function setColor(mycolor,defaultcolor,myElement){
    $(myElement).css("background",mycolor);
    //if you need the color back to normal
    //in 1 sec the color will back to normal
    setTimeout(function(){
        $(myElement).css("background",defaultcolor);
    },1000)
}