Як ви вимкнення / виведення фонового кольору за допомогою 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.

.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");
});

Я написав надзвичайно простий плагін 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.