jQuery animate nềnColor

Tôi đang cố gắng tạo hiệu ứng thay đổi trong backgroundColor bằng cách sử dụng jQuery trên mouseover.

Tôi đã kiểm tra một số ví dụ và tôi dường như đã đúng, nó hoạt động với các thuộc tính khác như fontSize, nhưng với backgroundColor tôi nhận được và lỗi js "Tài sản không hợp lệ". Yếu tố tôi đang làm việc là một div.

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

Có ý kiến ​​gì không?

Plugin màu chỉ rẻ hơn 4kb so với thư viện UI. Tất nhiên, bạn sẽ muốn sử dụng một phiên bản tốt của plugin chứ không phải một số lỗi cũ không xử lý được Safari và gặp sự cố khi quá trình chuyển đổi quá nhanh. Vì phiên bản rút gọn không được cung cấp, bạn có thể muốn thử nghiệm nhiều máy nén khác nhau và tạo phiên bản min của riêng bạn . YUI được nén tốt nhất trong trường hợp này chỉ cần 2317 byte và vì nó rất nhỏ - đây là:

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

Tôi đã có cùng một vấn đề và đã khắc phục nó bằng cách bao gồm jQuery UI. Đây là kịch bản hoàn chỉnh:

<!-- 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>

Làm điều đó với CSS3-Transitions. Hỗ trợ rất tốt (tất cả các trình duyệt hiện đại, thậm chí IE). Với La bàn và SASS, việc này nhanh chóng được thực hiện:

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

CSS thuần túy:

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

Tôi đã viết một bài báo tiếng Đức về chủ đề này: http://www.solife.cc/blog/animation-farben-css3-transition.html

Bitstorm có plugin hoạt hình màu jquery tốt nhất mà tôi từng thấy. Đó là một cải tiến cho dự án màu jquery. Nó cũng hỗ trợ rgba.

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

Bạn có thể sử dụng jQuery UI để thêm chức năng này. Bạn có thể lấy chỉ những gì bạn cần, vì vậy nếu bạn muốn làm động màu, tất cả những gì bạn phải đưa vào là đoạn mã sau. Tôi đã nhận nếu từ Giao diện người dùng jQuery mới nhất (hiện tại là 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);
};

Chỉ 1,43kb sau khi nén bằng YUI:

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

Bạn cũng có thể làm động các màu bằng cách sử dụng các chuyển tiếp CSS3 nhưng nó chỉ được hỗ trợ bởi các trình duyệt hiện đại.

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

Sử dụng tài sản tốc ký:

/* 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;
 }

Không giống như các chuyển đổi javascript thông thường, các chuyển đổi CSS3 được tăng tốc phần cứng và do đó mượt mà hơn. Bạn có thể sử dụng Modernizr, để tìm hiểu xem trình duyệt có hỗ trợ chuyển đổi CSS3 hay không, nếu không thì bạn có thể sử dụng jQuery làm dự phòng:

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

Hãy nhớ sử dụng stop () để dừng hoạt hình hiện tại trước khi bắt đầu một hình ảnh mới nếu không khi bạn chuyển qua phần tử quá nhanh, hiệu ứng sẽ nhấp nháy trong một thời gian.

Đối với bất cứ ai tìm thấy điều này. Tốt hơn hết là bạn nên sử dụng phiên bản UI UI vì nó hoạt động trên tất cả các trình duyệt. Plugin màu có vấn đề với Safari và Chrome. Nó chỉ hoạt động đôi khi.

Bạn có thể sử dụng 2 div:

Bạn có thể đặt một bản sao lên trên nó và làm mờ bản gốc trong khi làm mờ bản sao.

Khi mờ dần, khôi phục lại bản gốc với bg mới.

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

ví dụ jsFiddle

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

Tôi đã sử dụng kết hợp các chuyển tiếp CSS với JQuery để có hiệu quả mong muốn; rõ ràng các trình duyệt không hỗ trợ chuyển đổi CSS sẽ không hoạt động nhưng tùy chọn nhẹ này hoạt động tốt cho hầu hết các trình duyệt và đối với yêu cầu của tôi là sự xuống cấp chấp nhận được.

Jquery để thay đổi màu nền:

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

CSS sử dụng chuyển đổi để làm mờ dần thay đổi màu nền

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

Ngày nay, plugin màu jQuery hỗ trợ các màu được đặt tên sau:

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]

Tôi thích sử dụng delay () để thực hiện điều này, đây là một ví dụ:

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

Điều này có thể được gọi bởi một hàm, với "phần tử" là lớp phần tử / tên / vv. Phần tử sẽ xuất hiện ngay lập tức với nền # FCFCD8, giữ trong giây lát, sau đó mờ dần thành #EFEAEA.

Chỉ cần thêm đoạn mã dưới đây vào đoạn script jquery của bạn và thưởng thức:

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

Xem ví dụ

Tham khảo để biết thêm

Tôi tình cờ thấy trang này có cùng một vấn đề, nhưng các vấn đề sau:

1. Tôi không thể bao gồm một tệp plugin jQuery bổ sung với thiết lập hiện tại của mình.
2. Tôi không thoải mái khi dán các khối mã lớn mà tôi không có thời gian để đọc và xác nhận.
3. Tôi không có quyền truy cập vào css.
4. Tôi hầu như không có thời gian để thực hiện (nó chỉ là một cải tiến trực quan cho trang quản trị)

Với những điều trên mà khá nhiều loại trừ mọi câu trả lời. Xem xét sự phai màu của tôi rất đơn giản, tôi đã sử dụng cách hack nhanh sau đây:

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

Ở trên tạo ra một div tạm thời không bao giờ được đặt trong luồng tài liệu. Sau đó, tôi sử dụng hoạt hình tích hợp của jQuery để làm động một thuộc tính số của phần tử đó - trong trường hợp này width- có thể biểu thị tỷ lệ phần trăm (0 đến 100). Sau đó, bằng cách sử dụng chức năng bước, tôi chuyển hình ảnh động số này sang màu văn bản với một phép tính hex đơn giản.

Điều tương tự cũng có thể đạt được setInterval, nhưng bằng cách sử dụng phương pháp này, bạn có thể hưởng lợi từ các phương thức hoạt hình của jQuery - như .stop()- và bạn có thể sử dụng easingvà duration.

Rõ ràng, nó chỉ được sử dụng cho các màu đơn giản, đối với các chuyển đổi màu phức tạp hơn, bạn sẽ cần sử dụng một trong các câu trả lời ở trên - hoặc viết mã toán học làm mờ màu của riêng bạn :)

Hãy thử cái này:

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

bạn có thể xem trước ví dụ tại đây: http://jquerydemo.com/demo/jquery-animate-background-color.aspx

ColorBlend cắm vào thực hiện chính xác những gì bạn muốn

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

Đây là mã nổi bật của tôi

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

Nếu bạn không làm động nền của mình bằng cách chỉ sử dụng chức năng cốt lõi của jQuery, hãy thử điều này:

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

Cố gắng sử dụng nó

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

Hãy thử cái này:

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

Sửa đổi cách với hiệu ứng:

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

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