How do you fade in out a background color using jquery

Question

How do I fade in text content with jQuery   The point is to draw the user s attention to the message

User · Answer

javascript fade to white without jQuery or other library:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

In printing, yellow is minus blue, so starting with the 3rd rgb element (blue) at less than 255 starts out with a yellow highlight. Then the 10+ in setting the var unBlue value increments the minus blue until it reaches 255.

User · Answer

This exact functionality  3 second glow to highlight a message  is implemented in the jQuery UI as the highlight effect  https   api jqueryui com highlight-effect   Color and duration are variable

User · Answer

Depending on your browser support  you could use a css animation  Browser support is IE10 and up for CSS animation  This is nice so you don t have to add jquery UI dependency if its only a small easter egg  If it is integral to your site  aka needed for IE9 and below  go with the jquery UI solution    your-animation       background-color   fff  important      -webkit-animation  your-animation-name 1s ease 0s 1 alternate  important      You have to add the vendor prefix versions for it to work in Firefox  Safari  and Opera   -webkit-keyframes your-animation-name       from   background-color   5EB4FE       to  background-color   fff     -moz-animation  your-animation-name 1s ease 0s 1 alternate  important     -moz-keyframes your-animation-name       from   background-color   5EB4FE       to  background-color   fff     -ms-animation  your-animation-name 1s ease 0s 1 alternate  important     -ms-keyframes your-animation-name       from   background-color   5EB4FE       to  background-color   fff     -o-animation  your-animation-name 1s ease 0s 1 alternate  important     -o-keyframes your-animation-name       from   background-color   5EB4FE       to  background-color   fff     animation  your-animation-name 1s ease 0s 1 alternate  important     keyframes your-animation-name       from   background-color   5EB4FE       to  background-color   fff       Next create a jQuery click event that adds the your-animation class to the element you wish to animate  triggering the background fading from one color to another       some-button   click function e           place-to-add-class   addClass  your-animation

User · Answer

If you want to specifically animate the background color of an element  I believe you need to include jQueryUI framework  Then you can do       myElement   animate  backgroundColor    FF0000     slow      jQueryUI has some built-in effects that may be useful to you as well   http   jqueryui com demos effect

User · Answer

I wrote a super simple jQuery plugin to accomplish something similar to this  I wanted something really light weight  it s 732 bytes minified   so including a big plugin or UI was out of the question for me  It s still a little rough around the edges  so feedback is welcome   You can checkout the plugin here  https   gist github com 4569265   Using the plugin  it would be a simple matter to create a highlight effect by changing the background color and then adding a setTimeout to fire the plugin to fade back to the original background color

User · Answer

Usually you can use the  animate   method to manipulate arbitrary CSS properties  but for background colors you need to use the color plugin  Once you include this plugin  you can use something like others have indicated    div   animate  backgroundColor    f00    to change the color   As others have written  some of this can be done using the jQuery UI library as well

User · Answer

Using jQuery only  no UI library plugin   Even jQuery can be easily eliminated    Color row background in HSL space  easier to manipulate fading     tr   eq 1  css  backgroundColor   hsl 0 100  50      var d   1000  for var i 50  i lt  100  i i 0 1     i represents the lightness     d     10       function ii dd           setTimeout function                   tr   eq 1  css  backgroundColor   hsl 0 100    ii                    dd              i d       Demo   http   jsfiddle net 5NB3s 2    SetTimeout increases the lightness from 50  to 100   essentially making the background white  you can choose any value depending on your color    SetTimeout is wrapped in an anonymous function for it to work properly in a loop   reason

User · Answer

I know that the question was how to do it with Jquery  but you can achieve the same affect with simple css and just a little jquery     For example  you have a div with  box  class  add the following css   box   background-color  black  -webkit-transition  background 0 5s linear  -moz-transition  background 0 5s linear  -ms-transition  background 0 5s linear  -o-transition  background 0 5s linear  transition  background 0 5s linear      and then use AddClass function to add another class with different background color like  box highlighted  or something like that with the following css    box highlighted     background-color  white      I am a beginner and maybe there are some disadvantages of this method but maybe it ll be helpful for somebody  Here s a codepen  https   codepen io anon pen baaLYB

User · Answer

To fade between 2 colors using only simple javascript   function Blend a  b  alpha      var aa             parseInt  0x    a substring 1  3             parseInt  0x    a substring 3  5             parseInt  0x    a substring 5  7             var bb             parseInt  0x    b substring 1  3             parseInt  0x    b substring 3  5             parseInt  0x    b substring 5  7             r    0    Math round aa 0     bb 0  - aa 0   alpha  toString 16     g    0    Math round aa 1     bb 1  - aa 1   alpha  toString 16     b    0    Math round aa 2     bb 2  - aa 2   alpha  toString 16      return               r substring r length - 2            g substring g length - 2            b substring b length - 2      function fadeText cl1  cl2  elm     var t         var steps   100    var delay   3000     for  var i   0  i  lt  steps  i           function j             t j    setTimeout function               var a    j steps            var color   Blend cl1 cl2 a             elm style color   color              j delay steps          i          return t     var cl1     ffffff   var cl2     c00000   var elm   document getElementById  note    T    fadeText cl1 cl2 elm     Source  http   www pagecolumn com javascript fade text htm

[jquery] How do you fade in/out a background color using jquery?

Examples related to jquery

Examples related to css

Examples related to background-color

Examples related to fade