Jquery Animate() and 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() 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

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

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

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 animate on scroll backgroundColor not changing

Try including jQuery UI , as .animate() does not animate color without modifications or a color plugin; see .animate()

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).

also adjusting selector at positionofscroll to $(this).scrollTop(); changing comparison operator to > at if

$(function() {

  var content = $(".content");

  $(".box").scroll(function(event) {

    var positionofscroll = $(this).scrollTop();

    console.log(positionofscroll);

    if (positionofscroll > 0) {

      content.stop().animate({

        backgroundColor: "rgba(105, 63, 63, 0.69)"

      }, 500);

    } else {

      content.stop().animate({

        backgroundColor: "red"

      }, 500);

    }

  }); //scroll

});

.box {

  width: 100%;

  height: 500px;

  background: gray;

  overflow: auto;

}

.content {

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 1000px;

  background: red;

  font-size: 30px;

}

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

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

<!--Shadow Box when user scrolls -->

<div class="box">

  <div class="content">

    I'm content

  </div>

</div>

Jquery animate navigation color

use this code in your css

.nav{
    transition-duration: 2s;
}

DEMO