Как вы исчезаете в / из цвета фона с помощью jquery?

Если вы хотите специально анимировать цвет фона элемента, я считаю, что вам нужно включить jQueryUI framework. Тогда вы можете сделать:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI имеет некоторые встроенные эффекты, которые могут быть полезны для вас, а также.

http://jqueryui.com/demos/effect/

Я знаю, что вопрос был в том, как это сделать с Jquery, но вы можете добиться того же эффекта с помощью простого css и просто немного jquery...

например, у вас есть div с классом' box', добавьте следующий 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;
}

а затем используйте функцию AddClass, чтобы добавить еще один класс с другим цветом фона, например "выделенное поле" или что-то в этом роде со следующим css:

.box.highlighted {
  background-color: white;
}

Я новичок и, возможно, есть некоторые недостатки этот метод, но, возможно, это будет полезно для кого-то

вот кодовый ключ: https://codepen.io/anon/pen/baaLYB

обычно вы можете использовать .анимировать() метод для управления произвольными свойствами CSS, но для цветов фона вам нужно использовать цвета плагин. После включения этого плагина, вы можете использовать что-то вроде других указали $('div').animate({backgroundColor: '#f00'}) для изменения цвета.

Как уже писали, некоторые это можно сделать с помощью библиотеки пользовательского интерфейса jQuery.

только с помощью jQuery (без библиотеки пользовательского интерфейса/плагина). Даже jQuery можно легко устранить

//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<=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 увеличивает яркость от 50% до 100%, по существу делая фон белым (вы можете выбрать любое значение в зависимости от вашего цвета).
• SetTimeout завернут в анонимную функцию для его правильной работы в цикле (причина)

В зависимости от поддержки Вашего браузера, вы можете использовать анимацию css. Поддержка браузера-это IE10 и выше для анимации CSS. Это хорошо, поэтому вам не нужно добавлять зависимость jQuery UI, если это только небольшое пасхальное яйцо. Если он является неотъемлемой частью вашего сайта (он же необходим для IE9 и Ниже), перейдите к решению jQuery UI.

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

далее создайте событие щелчка jQuery, которое добавляет your-animation класс для элемента, который вы хотите анимировать, вызывая фон исчезает с одного цвета на другой другой:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

Я написал супер простой плагин jQuery для выполнения чего-то подобного этому. Я хотел что-то действительно легкий вес (это 732 байт уменьшен), так что в том числе большой плагин или пользовательский интерфейс был вне вопроса для меня. Это все еще немного грубо по краям, поэтому обратная связь приветствуется.

вы можете проверить плагин здесь:https://gist.github.com/4569265.

используя плагин, было бы просто создать эффект подсветки, изменив цвет фона, а затем добавить setTimeout чтобы запустить плагин, чтобы исчезнуть обратно к исходному цвету фона.

чтобы исчезать между 2 цветами, используя только простой 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 < 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);

Источник:http://www.pagecolumn.com/javascript/fade_text.htm

javascript исчезает до белого без jQuery или другой библиотеки:

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

при печати желтый цвет минус синий, поэтому начиная с 3-го элемента rgb (синий) менее 255 начинается с желтого выделения. Тогда 10+ в определении var unBlue значение увеличивает минус синий, пока он не достигнет 255.