jQuery를 사용하여 배경색을 희미하게 만드는 방법은 무엇입니까?

Question

현재 모든 사람들이 두 솔루션의 이야기 :

1. jQuery를 UI 플러그인 -> 가능하지를, 너무 많은 공간
를 사용하기 때문에
2. jQuery를 컬러 (http://api.jquery.com/animate/) - -> 실제로 다운로드 할 플러그인에 대한 링크를 얻을 수 없기 때문에 가능하지 않습니다.

제 질문은 jQuery v1.7.2에서이 효과를 허용하는 데 사용할 수있는 가장 작은 플러그인은 무엇입니까?

Answer 1

jQuery Color 플러그인을 GitHub 저장소에서 가져올 수 있습니다.

$("span.value").animate({ 
    backgroundColor: "transparent" 
}, 'slow'); 

See a live example using jQuery Color.

---

또한 CSS3 transitions를 사용할 수있다

span.value { 
    background-color: #0f0; 
} 

. ,

span.value { 
    background-color: #0f0; 
    -o-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -ms-transition-duration: 0.8s; 
    -webkit-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
} 

.fade { 
    background-color: transparent; 
} 

$("span.value").toggleClass("fade"); 

See a live example using CSS· transitions.

Answer 2

나는하지 마십시오하지만, ou는 어쩌면 RGBA로

RGBA (0, 255, 0, 1) => RGBA (0 애니메이션을 적용 할 수 있습니다 255, 0, 0)

Answer 3

시도해보십시오. 시도해보십시오.

,210

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

또는 궁극적으로 jQuery를 색상 플러그인을 사용하지 않을 경우는, CSS 전환 사용할 수

$("span").fadeOut("slow").css("background-color", "#ffff99"); 

Answer 4

시도 :

<button id="fadeTrigger">fade with jQuery <span>(and CSS...)</span></button> 

<div id="target" class="base"> 
    <p>some text in the targetted div element</p> 
</div>​ 

그리고 jQuery를 :

$('#fadeTrigger').click(
    function(){ 
     $('#target').toggleClass('base highlighted'); 
    });​ 

을

및 CSS :

button { 
    font-size: 1em; 
} 

button span { 
    font-size: 0.6em; 
    font-style: italic; 
} 

#target.base { 
    background-color: #fff; 
    -moz-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

#target.highlighted { 
    background-color: #f90; 
    -moz-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

JS Fiddle demo.

Answer 5

당신은 오히려 그들을 다운로드하는 것보다 당신의 head 태그

<script type="text/javascript" src=""></script> 

와 그 플러그인을 사용할 수 있습니다.

당신은 호버에 CSS에서 opacity 속성을 사용할 수

$(this).animate({ backgroundColor: '#HEXCODE' }, 'fast'); 

을 시도하거나.

#id{ 
    opacity:1; 
    } 

#id:hover{ 
    opacity: 0.8; 
} 

Answer 6

색상을 희미하게 만드는 아주 간단한 jQuery 플러그인을 작성했습니다. 그것은 약간의 연마를 사용할 수 있지만, 나는 그것이 당신이 무엇인지 생각합니다. 당신은 여기에서 그것을 확인할 수 있습니다 : https://gist.github.com/4569265