jQuery를 사용하여 배경색을 어떻게 사라지거나 아웃합니까?
-
13-09-2019 - |
문제
jQuery로 텍스트 내용을 어떻게 페이드합니까?
요점은 메시지에 사용자의 관심을 끌는 것입니다.
해결책
이 정확한 기능 (메시지를 강조하기위한 3 초의 빛)은 jQuery UI에서 하이라이트 효과로 구현됩니다.
https://api.jqueryui.com/highlight-effect/
색상과 지속 시간은 가변적입니다
다른 팁
요소의 배경색을 구체적으로 애니메이션하려면 jqueryui 프레임 워크를 포함해야한다고 생각합니다. 그런 다음 할 수 있습니다 :
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jqueryui에는 당신에게도 유용 할 수있는 몇 가지 내장 효과가 있습니다.
나는 문제가 jQuery로 그것을하는 방법이라는 것을 알고 있지만 간단한 CSS와 약간의 jQuery와 동일한 영향을 얻을 수 있습니다 ...
예를 들어 'Box'클래스가있는 div가 있는데 다음 CSS를 추가하십시오.
.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
그런 다음 AddClass 함수를 사용하여 'Box Highlighted'와 같은 다른 배경색 또는 다음 CSS와 같은 다른 클래스를 추가하십시오.
.box.highlighted {
background-color: white;
}
나는 초보자이고 어쩌면이 방법의 단점이 있지만 누군가에게 도움이 될 것입니다.
여기 코드 펜이 있습니다.https://codepen.io/anon/pen/baalyb
jQuery 만 사용 (UI 라이브러리/플러그인 없음). jQuery조차도 쉽게 제거 할 수 있습니다
//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).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(){
$('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)');
}, dd);
})(i,d);
}
데모 : http://jsfiddle.net/5nb3s/2/
- Settimeout은 가벼움을 50%에서 100%로 증가시켜 본질적으로 배경을 흰색으로 만듭니다 (색상에 따라 모든 값을 선택할 수 있음).
- Settimeout은 익명 기능으로 래핑되어 루프에서 제대로 작동합니다 ( 이유 )
브라우저 지원에 따라 CSS 애니메이션을 사용할 수 있습니다. 브라우저 지원은 CSS 애니메이션의 IE10 이상입니다. 이것은 작은 부활절 달걀만으로 jQuery UI 의존성을 추가 할 필요가 없습니다. 사이트에 필수적인 경우 (IE9 이하 이하에 필요한 경우) JQuery UI 솔루션을 사용하십시오.
.your-animation {
background-color: #fff !important;
-webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
다음으로 추가되는 jQuery 클릭 이벤트를 만듭니다 your-animation
애니메이션을 원하는 요소로 클래스로, 배경을 한 색상에서 다른 색상으로 트리거합니다.
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
나는 이와 비슷한 것을 달성하기 위해 매우 간단한 JQuery 플러그인을 썼습니다. 나는 정말로 가벼운 무게를 원했기 때문에 (732 바이트가 미수) 큰 플러그인이나 UI를 포함하여 나에게 의문의 여지가 없었습니다. 여전히 가장자리 주위에 약간 거칠기 때문에 피드백을 환영합니다.
여기에서 플러그인을 확인할 수 있습니다. https://gist.github.com/4569265.
플러그인을 사용하면 배경색을 변경 한 다음 setTimeout
플러그인을 발사하여 원래 배경색으로 다시 사라집니다.
간단한 JavaScript 만 사용하여 두 가지 색상으로 사라지는 것 :
function Blend(a, b, alpha) {
var aa = [
parseInt('0x' + a.substring(1, 3)),
parseInt('0x' + a.substring(3, 5)),
parseInt('0x' + a.substring(5, 7))
];
var bb = [
parseInt('0x' + b.substring(1, 3)),
parseInt('0x' + b.substring(3, 5)),
parseInt('0x' + b.substring(5, 7))
];
r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);
return '#'
+ r.substring(r.length - 2)
+ g.substring(g.length - 2)
+ b.substring(b.length - 2);
}
function fadeText(cl1, cl2, elm){
var t = [];
var steps = 100;
var delay = 3000;
for (var i = 0; i < steps; i++) {
(function(j) {
t[j] = setTimeout(function() {
var a = j/steps;
var color = Blend(cl1,cl2,a);
elm.style.color = color;
}, j*delay/steps);
})(i);
}
return t;
}
var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T = fadeText(cl1,cl2,elm);
JavaScript는 jQuery 또는 기타 라이브러리없이 흰색으로 페이드 :
<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
var obj=document.getElementById("x");
var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
if(unBlue>245) unBlue=255;
if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
else clearInterval(gEvent)
}
</script>
인쇄에서 노란색은 마이너스 파란색이므로 255 미만의 3 번째 RGB 요소 (파란색)부터 시작하여 노란색 하이라이트로 시작됩니다. 그럼 10+
설정에서 var unBlue
값은 255에 도달 할 때까지 마이너스 파란색을 증가시킵니다.