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

Как с помощью jQuery уменьшить текстовое содержимое?

Дело в том, чтобы привлечь внимание пользователя к сообщению.

Эта точная функция (3-секундное свечение для выделения сообщения) реализована в пользовательском интерфейсе jQuery как эффект выделения.

https://api.jqueryui.com/highlight-effect/

Цвет и продолжительность варьируются

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

$('#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

Обычно вы можете использовать метод .animate () для управления произвольными свойствами 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);
}

Демо: http://jsfiddle.net/5NB3s/2/

• SetTimeout увеличивает яркость с 50% до 100%, по сути делая фон белым (вы можете выбрать любое значение в зависимости от вашего цвета).
• SetTimeout заключен в анонимную функцию для правильной работы в цикле ( причина )

В зависимости от поддержки вашего браузера вы можете использовать CSS-анимацию. Браузер поддерживает IE10 и выше для анимации CSS. Это хорошо, поэтому вам не нужно добавлять зависимость пользовательского интерфейса jquery, если это всего лишь небольшое пасхальное яйцо. Если он является неотъемлемой частью вашего сайта (он же необходим для 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;}
}

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

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

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

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

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

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