[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);

그러나 다음을 포함해야합니다.

effects.core.js
effects.highlight.js



답변

이 함수는 jQuery effects.core.js의 일부입니다 .

$("#box").effect("highlight", {}, 1500);

Steerpike가 주석에서 지적했듯이이 기능 을 사용하려면 effects.core.jseffects.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')

데모 : http://jsfiddle.net/Q8KVC/528/


답변

(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에서 테스트되었습니다 (예, 이전 버전에서도 작동합니다).