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 함수를 사용하여 ‘상자 강조 표시’와 같은 다른 배경색을 가진 다른 클래스를 추가하거나 다음 CSS를 사용합니다.
.box.highlighted {
background-color: white;
}저는 초보자이고이 방법의 단점이있을 수도 있지만 누군가에게 도움이 될 수도 있습니다.
다음은 코드 펜입니다 :
https://codepen.io/anon/pen/baaLYB
답변
일반적으로 .animate () 메서드를 사용하여 임의의 CSS 속성을 조작 할 수 있지만 배경색의 경우 색상 플러그인 을 사용해야합니다 . 이 플러그인을 포함하면 다른 사람이 지정한 것과 같은 것을 사용 $('div').animate({backgroundColor: '#f00'})하여 색상을 변경할 수 있습니다.
다른 사람들이 작성한 것처럼이 중 일부는 jQuery UI 라이브러리를 사용하여 수행 할 수도 있습니다.
답변
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은 루프에서 제대로 작동하도록 익명 함수로 래핑됩니다 ( reason ).
답변
브라우저 지원에 따라 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;}
}다음 your-animation으로 애니메이션을 적용하려는 요소에 클래스를 추가하는 jQuery 클릭 이벤트를 생성하여 한 색상에서 다른 색상으로 배경 페이드를 트리거합니다.
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});답변
이와 유사한 작업을 수행하기 위해 매우 간단한 jQuery 플러그인을 작성했습니다. 나는 정말 가벼운 것을 원했기 때문에 (732 바이트 축소) 큰 플러그인이나 UI를 포함하는 것은 나에게 의문의 여지가 없었습니다. 여전히 가장자리가 약간 거칠기 때문에 피드백을 환영합니다.
https://gist.github.com/4569265 에서 플러그인을 확인할 수 있습니다 .
플러그인을 사용하면 배경색을 변경 한 다음를 추가 setTimeout하여 원래 배경색으로 페이드 백하는 플러그인을 실행 하여 하이라이트 효과를 만드는 것은 간단 합니다.
