[jquery] JQuery를 사용한 노란색 페이드 효과
37Signals의 Yellow Fade 효과 와 비슷한 것을 구현하고 싶습니다 .
Jquery 1.3.2를 사용하고 있습니다.
코드
(function($) {
$.fn.yellowFade = function() {
return (this.css({backgroundColor: "#ffffcc"}).animate(
{
backgroundColor: "#ffffff"
}, 1500));
}
})(jQuery);
다음 호출은 상자 ID로 DOM 요소를 노란색 페이드로 표시 합니다.
$("#box").yellowFade();그러나 그것은 단지 그것을 노란색으로 만듭니다. 15000 밀리 초 후에 흰색 배경이 없습니다.
왜 작동하지 않는지 아십니까?
해결책
당신이 사용할 수있는:
$("#box").effect("highlight", {}, 1500);그러나 다음을 포함해야합니다.
답변
이 함수는 jQuery effects.core.js의 일부입니다 .
$("#box").effect("highlight", {}, 1500);Steerpike가 주석에서 지적했듯이이 기능 을 사용하려면 effects.core.js 및 effects.highlight.js 가 포함되어야합니다.
답변
가볍고 플러그인이 필요하지 않았기 때문에 Sterling Nichols 답변을 좋아했습니다. 그러나 플로팅 요소 (예 : 요소가 “float : right”인 경우)에서는 작동하지 않음을 발견했습니다. 따라서 요소가 페이지에 어떻게 배치 되든 상관없이 강조 표시를 올바르게 표시하도록 코드를 다시 작성했습니다.
jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99",
"opacity": ".7",
"z-index": "9999999"
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}
선택 사항 :
요소의 테두리 반경도 일치 시키려면 다음 코드를 사용하세요.
jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99",
"opacity": ".7",
"z-index": "9999999",
"border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
"border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
"border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
"border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}
답변
jQuery 효과 라이브러리는 앱에 불필요한 오버 헤드를 상당히 추가합니다. jQuery로만 동일한 작업을 수행 할 수 있습니다. http://jsfiddle.net/x2jrU/92/
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
답변
다음과 같이 CSS를 정의하십시오.
@-webkit-keyframes yellowfade {
from { background: yellow; }
to { background: transparent; }
}
@-moz-keyframes yellowfade {
from { background: yellow; }
to { background: transparent; }
}
.yft {
-webkit-animation: yellowfade 1.5s;
-moz-animation: yellowfade 1.5s;
animation: yellowfade 1.5s;
}
yft모든 항목에 클래스 를 추가하기 만하면$('.some-item').addClass('yft')
답변
(function($) {
$.fn.yellowFade = function() {
this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
}
})(jQuery);
트릭을해야합니다. 노란색으로 설정 한 다음 흰색으로 페이드
답변
작업중인 프로젝트에서 이와 유사한 문제를 방금 해결했습니다. 기본적으로 애니메이션 기능은 색상에 애니메이션을 적용 할 수 없습니다. jQuery Color Animations를 포함 해보십시오 .
여기의 모든 답변은이 플러그인을 사용하지만 아무도 언급하지 않습니다.
답변
실제로 jQuery 1.3x 만 필요하고 추가 플러그인이없는 솔루션이 있습니다.
먼저 스크립트에 다음 함수를 추가하십시오.
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
return Math.ceil(stepp)
}
function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
var actStep = 0;
elem.bgFadeInt = window.setInterval(
function() {
elem.css("backgroundColor", "rgb("+
easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")"
);
actStep++;
if (actStep > steps) {
elem.css("backgroundColor", finalColor);
window.clearInterval(elem.bgFadeInt);
}
}
,intervals)
}
다음으로 다음을 사용하여 함수를 호출합니다.
doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );매개 변수를 추측 해 보겠습니다.이 매개 변수는 자명합니다. 솔직히 말해서 스크립트는 나에게서 온 것이 아니기 때문에 한 페이지에서 가져온 다음 최신 jQuery에서 작동하도록 변경했습니다.
주의 : 파이어 폭스 3 및 6에서 테스트되었습니다 (예, 이전 버전에서도 작동합니다).
