Как увеличить/уменьшить цвет фона с помощью jquery?
-
13-09-2019 - |
Вопрос
Как исчезнуть текстовое содержимое с помощью jQuery?
Цель — привлечь внимание пользователя к сообщению.
Решение
Именно эта функция (3-секундное свечение для выделения сообщения) реализована в пользовательском интерфейсе jQuery как эффект выделения.
https://api.jqueryui.com/highlight-effect/
Цвет и продолжительность варьируются
Другие советы
Если вы хотите специально анимировать цвет фона элемента, я считаю, что вам нужно включить фреймворк jQueryUI.Тогда вы можете сделать:
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI имеет несколько встроенных эффектов, которые также могут вам пригодиться.
Я знаю, что вопрос заключался в том, как это сделать с помощью 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;
}
Я новичок, и, возможно, у этого метода есть некоторые недостатки, но, возможно, кому-то он будет полезен.
Обычно вы можете использовать .анимировать() метод для управления произвольными свойствами 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-анимацию.Браузер поддерживает CSS-анимацию IE10 и выше.Это хорошо, поэтому вам не нужно добавлять зависимость пользовательского интерфейса jquery, если это всего лишь маленькая пасхалка.Если он является неотъемлемой частью вашего сайта (то есть необходим для IE9 и ниже), используйте решение пользовательского интерфейса jquery.
.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
class к элементу, который вы хотите анимировать, вызывая плавное перетекание фона из одного цвета в другой:
$(".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>
При печати желтый — это минус синий, поэтому начиная с третьего элемента RGB (синего) с номером менее 255 начинается с желтого выделения.Тогда 10+
в установлении var unBlue
значение увеличивает минус синий, пока не достигнет 255.