jQuery 애니메이션 backgroundColor


327

마우스 오버에서 jQuery를 사용하여 backgroundColor의 변경 사항을 애니메이션하려고합니다.

몇 가지 예를 확인한 후 올바른 것으로 보입니다. fontSize와 같은 다른 속성과 작동하지만 backgroundColor를 사용하면 "잘못된 속성"js 오류가 발생합니다. 내가 작업하고있는 요소는 div입니다.

$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

어떤 아이디어?


jquery 효과 1.8이있는 jquery 1.4.2의 경우 Andrew 솔루션이 완벽하게 작동한다는 것을 인정해야합니다. 아래에서 그의 게시물을 참조하십시오.
Patrick Desjardins

1
참고 :이 플러그인은 요소의 현재 배경색을 감지하고 rgba(0, 0, 0, 0)있습니다. 배경색이 정의되어 있지 않으면 Chrome 브라우저가 예상되는 빈 / 널 값 대신 반환 합니다. 이것을 "수정"하려면 요소의 초기 배경색이 있어야합니다.
Shadow Wizard is Ear For You

링크 된 페이지가 깨진 것 같습니다 (적어도 프로젝트 페이지 및 데모 페이지).
Paolo Stefan

답변:


333

색상 플러그인은 UI 라이브러리보다 훨씬 4kb 저렴합니다. 물론 전환이 너무 빠르면 Safari를 처리하지 않고 충돌하는 버그가있는 오래된 플러그인이 아닌 적절한 버전 의 플러그인 을 사용하고 싶을 입니다. 축소 버전이 제공되지 않으므로 다양한 압축기를 테스트하고 자신의 최소 버전을 만들 수 있습니다 . 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
앤드류가 제안한 링크로 가십시오. 파일을 다운로드하십시오. 프로젝트에 추가해야합니다. 프로젝트에 jquery.effects.core를 계속 사용할 수 있으며 이는 완벽하게 작동합니다. 답변 감사합니다. +1
Patrick Desjardins

3
나는 단순히 위의 내용을 기존의 'jquery-ui-1.8.2.min.js'파일에 붙여 넣었고 ... 모든 것이 여전히 작동했습니다 :-)
Dave Everitt

7
작년 (2011) 에이 플러그인의 작성자는 많은 멋진 기능을 갖춘 버전 2를 출시했지만이 lib가 일반적으로 추구하는 기본 기능에는 필요하지 않습니다. 이제 20KB 이상입니다. v1이전 버전을 가져 오기 위해 분기를 선택할 수 있지만 여전히 작동합니다.
Aren

6
FWIW - 당신은 코드의 색상 - 투 - RGB 매핑을 제거하고 더 크기를 줄일 수 있습니다 : raw.github.com/gist/1891361/...를 . 단점은 애니메이션에 색상 이름을 사용할 수 없다는 것입니다. rgb 값을 사용해야합니다.
Niyaz

4
jQuery 1.8은이 플러그를 btw에서 끊습니다. curCSS는 더 이상 jQuery에 없습니다.
Rich Bradshaw

68

나는 같은 문제가 있었고 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>

61

CSS3 전환으로 수행하십시오. 지원은 훌륭합니다 (모든 최신 브라우저, 심지어 IE). Compass와 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


6
바이올린 호버클릭 의 전환 : jsfiddle.net/K5Qyx
민주 Pilafian


13

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

YUI로 압축 한 후 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 전환은 하드웨어 가속으로 인해 더 매끄 럽습니다. Modernizr을 사용하여 브라우저가 CSS3 전환을 지원하는지 여부를 확인할 수 있습니다. 그렇지 않은 경우 jQuery를 폴백으로 사용할 수 있습니다.

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

새 애니메이션을 시작하기 전에 stop ()을 사용하여 현재 애니메이션을 중지해야합니다. 그렇지 않으면 요소를 너무 빨리 통과하면 효과가 잠시 동안 깜박입니다.


11

이것을 찾는 사람을 위해. 모든 브라우저에서 작동하므로 jQuery UI 버전을 사용하는 것이 좋습니다. 색상 플러그인에 Safari 및 Chrome에 문제가 있습니다. 때로는 작동합니다.


6
-1 최신 버전의 색상 플러그인은 Chrome에서 완벽하게 작동합니다.
앤드류

3
배경에 애니메이션을 적용하기위한 추가 스크립트를 포함시키는 것은 무겁습니다
oneiros

11

2 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);
    });
});​

jsFiddle 예제


.toggleClass()
.offset()
.fadeIn()
.fadeOut()


어쩌면 그것은 어떤 시점에서 효과가 있었지만 적어도 옳은 것은 아닙니다.
epeleg

@epeleg-나를 위해 맥 크롬에서 작동합니다. 당신은 색깔의 사각형을 클릭하고 색상이 변경됩니다 (
2013-07-15

어떻게 해야할지 모르겠지만 실제로는 내 windows7 크롬에서 작동합니다. 어쩌면 내가 한 크롬 업데이트와 관련이 있습니까?! 어쨌든 내가 말한대로 지금은 효과가 있습니다.
epeleg

8

원하는 효과를 위해 CSS 전환을 JQuery와 조합하여 사용했습니다. 분명히 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; 
   }

6

요즘 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]

1
소스를 인용 해 주시겠습니까? 목록 btw에 감사드립니다.
Shrikant Sharat

이 목록은 jQuery를 색상 플러그인에서 온 : plugins.jquery.com/project/color
spoulson

2
-1 색상 목록은 오래된 버전을 나타냅니다. 현재 버전에는 눈에 띄는 추가 색상이 하나 이상 있습니다.
앤드류

5

delay ()를 사용 하여이 작업을 수행하는 것을 좋아합니다. 예는 다음과 같습니다.

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

이것은 "class"가 요소 class / name / etc 인 함수에 의해 호출 될 수 있습니다. 요소는 # FCFCD8 배경과 함께 즉시 나타나고 잠시 기다렸다가 #EFEAEA로 페이드 인합니다.



2

같은 문제 로이 페이지를 우연히 발견했지만 다음과 같은 문제가 있습니다.

  1. 현재 설정에 추가 jQuery 플러그인 파일을 포함시킬 수 없습니다.
  2. 읽고 코드를 검증 할 시간이없는 큰 코드 블록을 붙여 넣는 것이 불편합니다.
  3. CSS에 액세스 할 수 없습니다.
  4. 구현 시간이 거의 없었습니다 (관리자 페이지의 시각적 개선 일뿐입니다)

위의 내용으로 모든 대답을 거의 배제했습니다. 색상의 페이드가 매우 간단하다는 것을 고려하여 대신 다음과 같은 빠른 해킹을 사용했습니다.

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');
      }
    }
  )
;

위는 문서 흐름에 배치되지 않은 임시 div를 만듭니다. 그런 다음 jQuery의 내장 애니메이션을 사용하여 해당 요소의 숫자 속성에 애니메이션을 적용합니다 (이 경우 width백분율 (0 ~ 100)). 그런 다음 step 함수를 사용하여 간단한 숫자 교정을 사용하여이 숫자 애니메이션을 텍스트 색상으로 전송합니다.

로도 같은 작업을 수행 할 수 setInterval있었지만이 방법을 사용하면 jQuery의 애니메이션 방법 (예 .stop(): 등)을 활용할 수 있으며 easingand 를 사용할 수 있습니다 duration.

분명히 단순한 색상 페이드에만 사용되며 더 복잡한 색상 변환을 위해서는 위의 답변 중 하나를 사용하거나 자신의 색상 페이드 수학을 코딩해야합니다. :)


2

이거 한번 해봐:

(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



1

핵심 jQuery 기능 만 사용하여 배경에 애니메이션을 적용하지 않으려면 다음을 시도하십시오.

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 : ''});
            });
        });

0

그것을 사용해보십시오

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

0

이거 한번 해봐:

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");
    });
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.