복붙노트

[JQUERY] jQuery를 애니메이션의 backgroundColor

JQUERY

jQuery를 애니메이션의 backgroundColor

해결법

  1. 1.색상 플러그인은 UI 라이브러리에 비해에만 4킬로바이트 훨씬 저렴합니다. 물론 당신은 괜찮은 플러그인의 버전이 아닌 전환이 너무 빠른 경우 사파리와 충돌을 처리하지 않는 몇 가지 버그가 오래된 물건을 사용하는 것이 좋습니다. 축소 된 버전이 제공되지 않기 때문에 당신은 테스트 다양한 압축기를 좋아하고 자신의 분 버전을 만들 수 있습니다. YUI는 2317 바이트를 필요로이 경우 최적의 압축을 얻고 그렇게 작기 때문에 - 여기있다 :

    색상 플러그인은 UI 라이브러리에 비해에만 4킬로바이트 훨씬 저렴합니다. 물론 당신은 괜찮은 플러그인의 버전이 아닌 전환이 너무 빠른 경우 사파리와 충돌을 처리하지 않는 몇 가지 버그가 오래된 물건을 사용하는 것이 좋습니다. 축소 된 버전이 제공되지 않기 때문에 당신은 테스트 다양한 압축기를 좋아하고 자신의 분 버전을 만들 수 있습니다. YUI는 2317 바이트를 필요로이 경우 최적의 압축을 얻고 그렇게 작기 때문에 - 여기있다 :

    (function (d) {
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
                break
            }
            e = "backgroundColor"
        } while (g = g.parentNode);
        return b(f)
    }
    var a = {
        aqua: [0, 255, 255],
        azure: [240, 255, 255],
        beige: [245, 245, 220],
        black: [0, 0, 0],
        blue: [0, 0, 255],
        brown: [165, 42, 42],
        cyan: [0, 255, 255],
        darkblue: [0, 0, 139],
        darkcyan: [0, 139, 139],
        darkgrey: [169, 169, 169],
        darkgreen: [0, 100, 0],
        darkkhaki: [189, 183, 107],
        darkmagenta: [139, 0, 139],
        darkolivegreen: [85, 107, 47],
        darkorange: [255, 140, 0],
        darkorchid: [153, 50, 204],
        darkred: [139, 0, 0],
        darksalmon: [233, 150, 122],
        darkviolet: [148, 0, 211],
        fuchsia: [255, 0, 255],
        gold: [255, 215, 0],
        green: [0, 128, 0],
        indigo: [75, 0, 130],
        khaki: [240, 230, 140],
        lightblue: [173, 216, 230],
        lightcyan: [224, 255, 255],
        lightgreen: [144, 238, 144],
        lightgrey: [211, 211, 211],
        lightpink: [255, 182, 193],
        lightyellow: [255, 255, 224],
        lime: [0, 255, 0],
        magenta: [255, 0, 255],
        maroon: [128, 0, 0],
        navy: [0, 0, 128],
        olive: [128, 128, 0],
        orange: [255, 165, 0],
        pink: [255, 192, 203],
        purple: [128, 0, 128],
        violet: [128, 0, 128],
        red: [255, 0, 0],
        silver: [192, 192, 192],
        white: [255, 255, 255],
        yellow: [255, 255, 0],
        transparent: [255, 255, 255]
    }
})(jQuery);

  2. 2.저도 같은 문제를 겪고 및 jQuery를 UI를 포함하여 해결했습니다. 여기에 전체 스크립트입니다 :

    저도 같은 문제를 겪고 및 jQuery를 UI를 포함하여 해결했습니다. 여기에 전체 스크립트입니다 :

    <!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#menu ul li.item').hover(
    function() {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });
});
</script>

  3. 3.CSS3 - 전환으로 작업을 수행합니다. 지원은 큰 (모든 최신 브라우저에서도 IE를)입니다. 나침반과 SASS이 신속하게 이루어집니다 :

    CSS3 - 전환으로 작업을 수행합니다. 지원은 큰 (모든 최신 브라우저에서도 IE를)입니다. 나침반과 SASS이 신속하게 이루어집니다 :

    #foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

    순수 CSS :

    #foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

    나는이 주제에 대한 독일어 기사를 쓴했습니다 http://www.solife.cc/blog/animation-farben-css3-transition.html

  4. 4.Bitstorm는 내가 본 플러그인 최고의 JQuery와 컬러 애니메이션이 있습니다. 그것은 JQuery와 컬러 프로젝트에 대한 개선입니다. 또한 RGBA를 지원합니다.

    Bitstorm는 내가 본 플러그인 최고의 JQuery와 컬러 애니메이션이 있습니다. 그것은 JQuery와 컬러 프로젝트에 대한 개선입니다. 또한 RGBA를 지원합니다.

    http://www.bitstorm.org/jquery/color-animation/

  5. 5.이 기능을 추가 할 jQuery를 UI를 사용할 수 있습니다. 당신은 애니메이션 색상 원하는 그렇다면, 당신이 필요로 바로 잡아 수 있습니다, 당신이 포함해야하는 것은 다음과 같은 코드입니다. 내가 가진 경우 최신에서 jQuery를 UI (현재 1.8.14)을

    이 기능을 추가 할 jQuery를 UI를 사용할 수 있습니다. 당신은 애니메이션 색상 원하는 그렇다면, 당신이 필요로 바로 잡아 수 있습니다, 당신이 포함해야하는 것은 다음과 같은 코드입니다. 내가 가진 경우 최신에서 jQuery를 UI (현재 1.8.14)을

    /******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/

// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (!fx.colorInit) {
            fx.start = getColor(fx.elem, attr);
            fx.end = getRGB(fx.end);
            fx.colorInit = true;
        }

        fx.elem.style[attr] = 'rgb(' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
        var result;

        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                return color;

        // Look for rgb(num,num,num)
        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

        // Look for rgb(num%,num%,num%)
        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

        // Look for #a0b1c2
        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

        // Look for #fff
        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                return colors['transparent'];

        // Otherwise, we're most likely dealing with a named color
        return colors[$.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
        var color;

        do {
                color = $.curCSS(elem, attr);

                // Keep going until we find an element that has color, or we hit the body
                if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
                        break;

                attr = "backgroundColor";
        } while ( elem = elem.parentNode );

        return getRGB(color);
};

    그것은 유이와 함께 압축 후 만 1.43kb이다 :

    $.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};

    당신은 CSS3 전환을 사용하여도 애니메이션 색상을 할 수 있지만 그것은 단지 현대적인 브라우저에서 지원합니다.

    a.test {
  color: red;
  -moz-transition-property: color;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: color;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: color;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: color;  /* Standard */
  transition-duration: 1s;
  }

  a.test:hover {
  color: blue;
  }

    약식 속성을 사용하여 :

    /* shorthand notation for transition properties */
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

a.test {
  color: red;
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -o-transition: color 1s;
  -ms-transition: color 1s;
  transition: color 1s;
  }

a.test {
  color: blue;
 }

    일반 자바 스크립트 전환과는 달리, CSS3 전환은 하드웨어 가속 따라서 부드러운 있습니다. 브라우저가 CSS3 전환을 지원하는 경우 그 다음 당신은 대체로 jQuery를 사용하지 않았다 경우, 알아, 모더 나이저를 사용할 수 있습니다 :

    if ( !cssTransitions() ) {
    $(document).ready(function(){
        $(".test").hover(function () {
                $(this).stop().animate({ backgroundColor: "red" },500)
             }, function() {
                 $(this).stop().animate({ backgroundColor: "blue" },500)}    
             );
    }); 
}

    당신이 너무 빨리 요소를 통해 통과 할 때, 그렇지 않으면 새로운 것을 시작하기 전에 현재 애니메이션을 중지 사용 중지 ()에 기억 효과는 잠시 동안 계속 깜빡입니다.

  6. 6.누군가를 위해이를 찾는. 이 모든 브라우저에서 작동하기 때문에 jQuery를 UI 버전을 사용 떨어져 당신의 더 나은. 색상 플러그인은 사파리와 크롬에 문제가 있습니다. 그것은 단지 가끔 작동합니다.

    누군가를 위해이를 찾는. 이 모든 브라우저에서 작동하기 때문에 jQuery를 UI 버전을 사용 떨어져 당신의 더 나은. 색상 플러그인은 사파리와 크롬에 문제가 있습니다. 그것은 단지 가끔 작동합니다.

  7. 7.당신은이 개 된 div를 사용할 수 있습니다 :

    당신은이 개 된 div를 사용할 수 있습니다 :

    의 복제를 퇴색하면서 원래 아웃 그 위에 복제를 넣어 사라질 수 있습니다.

    페이드가 완료되면, 새로운 BG와 원본을 복원합니다.

    $(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();

      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body")
         .offset({top: os.top, left: os.left}).hide();

    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});​

    .toggleClass () .오프셋() .점점 뚜렷해지다() .사라지다()

  8. 8.내가 원하는 효과에 대한 jQuery로 CSS 전환의 조합을 사용; CSS 전환을 지원하지 않는 분명히 브라우저는하지 애니메이션하지만 대부분의 브라우저에 대한 내 요구 사항에 잘 작동 경량 옵션을 허용 저하입니다 것입니다.

    내가 원하는 효과에 대한 jQuery로 CSS 전환의 조합을 사용; CSS 전환을 지원하지 않는 분명히 브라우저는하지 애니메이션하지만 대부분의 브라우저에 대한 내 요구 사항에 잘 작동 경량 옵션을 허용 저하입니다 것입니다.

    JQuery와 배경색을 변경합니다 :

       $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

    CSS 배경 색 변화를 페이드 전환을 사용하여

       .mylinkholder a
   {
   transition: background-color .5s ease-in-out;
   -moz-transition: background-color .5s ease-in-out;
   -webkit-transition: background-color .5s ease-in-out; 
  -o-transition: background-color .5s ease-in-out; 
   }

  9. 9.이름 색상 다음 요즘 jQuery를 색상 플러그인 지원 :

    이름 색상 다음 요즘 jQuery를 색상 플러그인 지원 :

    aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]

  10. 10.나는 지연을 사용하는 것과 같이 ()이 여기에 예입니다, 수행하세요 :

    나는 지연을 사용하는 것과 같이 ()이 여기에 예입니다, 수행하세요 :

    jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

    이것은 "요소"인 요소 클래스 / 이름 / 등으로, 함수를 호출 할 수 있습니다. 요소는 즉시 #EFEAEA에 다음 페이드, 두 번째의 # FCFCD8 배경, 보류로 표시됩니다.

  11. 11.간단 JQuery와 스크립트 아래에 다음 코드를 추가하고 즐기십시오 :

    간단 JQuery와 스크립트 아래에 다음 코드를 추가하고 즐기십시오 :

    <script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

    예를 참조하십시오

    추가 정보를 참조

  12. 12.저도 같은 문제로이 페이지를 우연히 발견하지만, 다음과 같은 문제 :

    저도 같은 문제로이 페이지를 우연히 발견하지만, 다음과 같은 문제 :

    그 위의 거의 모든 대답을 배제로. 컬러의 내 퇴색이 매우 간단 고려, 내가 대신 다음과 같은 빠른 해킹을 사용 :

    element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

    위의 문서 흐름에 배치되지 않습니다 임시 사업부를 작성합니다. 그때 사용하는 jQuery의 내장 애니메이션 해당 요소의 숫자 속성에 애니메이션을 -이 경우 폭 - 비율 (0 ~ 100)를 나타낼 수 있습니다. 그리고, 스텝 함수를 사용하여, I 간단한 육각 cacluation와 문자색이 숫자 애니메이션 옮긴다.

    동일은 setInterval을 달성 한 수 있지만이 방법을 사용하여 당신은 jQuery의 애니메이션 방법 혜택을 누릴 수 있습니다 (-) .stop처럼 - 당신은 완화 및 지속 시간 사용할 수 있습니다.

    분명히 그것은 단지 간단한 색상 페이드에 대한 사용의이다, 더 복잡 색상 변환을 위해 당신은 위의 답변 중 하나를 사용해야합니다 - 또는 코드를 자신의 컬러 페이드 수학 :)

  13. 13.이거 한번 해봐:

    이거 한번 해봐:

    (function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);

    여기에 예를 미리 볼 수 있습니다 : http://jquerydemo.com/demo/jquery-animate-background-color.aspx

  14. 14.ColorBlend 플러그의 유 원하는 정확히 수행

    ColorBlend 플러그의 유 원하는 정확히 수행

    http://plugins.jquery.com/project/colorBlend

    여기에 내 하이라이트 코드는

    $("#container").colorBlend([{
    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);

  15. 15.당신은 단지 핵심 jQuery를 기능을 사용하여 배경을 애니메이션 wan't 경우,이 시도 :

    당신은 단지 핵심 jQuery를 기능을 사용하여 배경을 애니메이션 wan't 경우,이 시도 :

    jQuery(".usercontent").mouseover(function() {
      jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() {
            jQuery(this).animate({
                backgroundColor: 'white'
            }, 'normal', 'linear', function() {
                jQuery(this).css({'background':'none', backgroundColor : ''});
            });
        });

  16. 16.를 사용해보십시오

    를 사용해보십시오

    -moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;

  17. 17.이거 한번 해봐:

    이거 한번 해봐:

    jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

    효과와 방법을 수정 :

    jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});

    18. from https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 가장 좋은 방법은 구글의 호스팅 jQuery를 사용하지만 구글 실패에 내 호스팅 라이브러리에 다시 가을  (0) 2020.09.23
[JQUERY] 이벤트를 발생시킨 요소의 ID를 얻기  (0) 2020.09.23
[JQUERY] 하이라이트 / 선택한 텍스트를 가져옵니다  (0) 2020.09.23
[JQUERY] 4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법  (0) 2020.09.23
[JQUERY] 왜 페이지로드 즉시 클릭 이벤트 처리기 화재는 무엇입니까?  (0) 2020.09.23
,

티스토리툴바