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

96

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

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

мрбла
источник
вы можете начать здесь: docs.jquery.com/Effects/fadeIn docs.jquery.com/Effects/fadeOut docs.jquery.com/UI/Effects/ColorAnimations
неполярность
1
Вам не нужно использовать цвет или плагины пользовательского интерфейса для анимации цвета фона. Я ответил на этот вопрос здесь .
matadur

Ответы:

90

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

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

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

мкМкг
источник
53
$ ('newCommentItem'). effect ("выделить", {}, 3000);
Рави Рам
5
Другой пример, изменение цвета: $ (element) .effect ("highlight", {color: 'blue'}, 3000);
Хорхе Оливарес,
@RaviRam - отлично!
Kneidels
90

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

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

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

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

user113716
источник
3
Для этого мне пришлось включить "jQuery Color", который также есть в jquery docs ( "(например, width, height или left могут быть анимированы, но background-color не может быть, если не используется плагин jQuery.Color)" ).
Борис
'slow'можно заменить на секунды ... где 1000 равно 1 секунде ... и так далее.
Pathros
25

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

NoDisplayName
источник
Классный раствор. Спасибо.
thedp 02
Это отличное решение, которое работает без дополнительных библиотек и изначально поддерживается во всех современных браузерах. Спасибо!
rprez
14

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

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

Райан
источник
9

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

В зависимости от поддержки вашего браузера вы можете использовать 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");
});
Рич Финелли
источник
2
Это, безусловно, лучшее решение. Вот демонстрация на JSfiddle.net
Рикардо
4

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

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

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

Доминик П
источник
Dominik P: спасибо за ваш «маленький» плагин. Это хорошо подходит для моих нужд!
psulek 01
3

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

Кертис Яллоп
источник
0

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.

Гордон
источник