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

Как я могу исчезать в текстовом контенте с помощью jQuery?

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 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, чтобы добавить другой класс с другим цветом фона, например "выделенный прямоangularьник", или что-то подобное со следующим css:

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

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

Вот кодекс:https://codepen.io/anon/pen/baaLYB

Ответ 4

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

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

Ответ 5

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

Ответ 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;}
}

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

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

Ответ 7

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

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

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

Ответ 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

Ответ 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.