Как вы можете увеличить / уменьшить фоновый цвет, используя jquery?

Question

Как добавить текстовое содержимое в jQuery?

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

Answer 1

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

http://docs.jquery.com/UI/Effects/Highlight

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

Answer 2

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

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

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

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

Answer 3

Я знаю, что вопрос был в том, как это сделать с помощью 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

Answer 4

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

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

Answer 5

Использование только 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 обернут в анонимную функцию для правильной работы в цикле ( причина )

Answer 6

В зависимости от поддержки вашего браузера вы можете использовать анимацию 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");
});

Answer 7

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

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

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

Answer 8

Для перехода между двумя цветами, используя только простой 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

Answer 9

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.