특정 이벤트에서 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 

자바 스크립트

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) 
} 

Answer 2

당신은 JS 코드가있어 좋지만 라디오 입력에 레이블을 추가해야합니다 :

당신의 js에서 다음

<label for="test1"> 
    <input id="test1" type="radio" value="no">No 
</label> 

:

$(document).ready(function() { 
    var button = $('#test1'); 
    button.click(function() { 
     // Target the <label> 
     button.parent().css('color', '#F00'); 
    }); 
}); 

체크 아웃이 DEMO

Answer 3

간단한 당신의 CSS를이 추가 : ainmate 기능 대신 을 사용할 수 있습니다

#test1 { 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    transition: all .2s ease; 
} 

또는 CSS.