Jquery Animate Backgroundcolor

jQuery animate backgroundColor

The color plugin is only 4kb so much cheaper than the UI library. Of course you'll want to use a decent version of the plugin and not some buggy old thing which doesn't handle Safari and crashes when the transitions are too fast. Since a minified version isn't supplied you might like test various compressors and make your own min version. YUI gets the best compression in this case needing only 2317 bytes and since it is so small - here it is:

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

How to animate background color in jQuery?

You need to import an additional plugin such as jQuery UI in order to support color in your animate() function as jQuery alone doesn't.

$("#colorBtn").click(function() {

  $('#demodiv').animate({backgroundColor: 'blue'})

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<input type="button" id="colorBtn" value="Change Color"/><br>

<div id="demodiv" style="height:100px;width:100px;background:red"></div>

jQuery Animate not working on background-color property

As per jQuery API docs:

The .animate() method allows us to create animation effects on any numeric CSS property.

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)

^{emphasis is mine}

Background Color is not a numeric property and so it cannot be animated using .animate().

jQuery Animate() and BackgroundColor

jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Source

Animate (jQuery) background color not working on scroll function

A solution is css3. you can use transition to make background color smooth via addClass and removeClass to toggle css class with jquery.

 $(window).scroll(function() {
   var top = $(window).scrollTop();
   if (top > 0) {
$('.menu').addClass('newColor');
   } else {
$('.menu').removeClass('newColor');
   }
 });

JSFiddle

If you want ,you can include jquery ui library and make animate work.

 $(window).scroll(function() {
   var top = $(window).scrollTop();

   if (top > 0) {
$('.menu').stop(true, true).animate({
        backgroundColor: '#ED1847'
    })
   } else {
$('.menu').stop(true, true).animate({
        backgroundColor: '#383737'
    })
   }
 });

JSFiddle

jQuery change background color with fade and return back to original with delay

Please do not forget to include jquery-ui library. Else it does not work

$(document).ready(function() {

  $('.sample').click(function() {

    $(this).animate({

      backgroundColor: "green"

    }, 1000).delay(2000).queue(function() {

      $(this).animate({

        backgroundColor: "red"

      }, 1000).dequeue();

    });

  });

});

.sample {

  font: normal 12px/18px 'Arial';

  color: #fff;

  background: red;

  padding: 20px;

  cursor: pointer

}

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

<div class="sample">

Click Me to see smooth background color transition and back to original background

</div>

</body>

jquery animate the page background-color on page load

Working demo http://jsfiddle.net/aqrvA/8/

Add Jquery ui library as well please Rest will work like a rocket! < Your code is fine >

Jquery UI link: http://jqueryui.com/

Hope this helps, :)

Script:

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

code

$(document).ready(function(){
    $("html body").animate({ backgroundColor: "#000000" }, 1000);
});​

How change background-color with jquery animation, like a transition

Sorry with all colors you can do this:

    function  spectrum(){
    var  mcolors = ['green', 'blue', 'red'];
    var time = 500;             
    $.each(mcolors, function(index, value){
    setTimeout( function(){ 
$('.background').css({
    transition: 'background-color 1s ease-in-out',
    "background-color": value
    }); }, time)
    time += 1000;
    });}

---

Related Topics