Wie blendet man eine Hintergrundfarbe mit jquery ein / aus?

Wie kann ich Textinhalte mit jQuery einblenden?

Es geht darum, den Benutzer auf die Nachricht aufmerksam zu machen.

Diese genaue Funktionalität (3 Sekunden langes Leuchten zum Hervorheben einer Nachricht) wird in der jQuery-Benutzeroberfläche als Hervorhebungseffekt implementiert

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

Farbe und Dauer sind variabel

Wenn Sie die Hintergrundfarbe eines Elements gezielt animieren möchten, müssen Sie meines Erachtens das jQueryUI-Framework einbeziehen. Dann können Sie tun:

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

jQueryUI verfügt über einige integrierte Effekte, die auch für Sie nützlich sein können.

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

Ich weiß, dass die Frage war, wie man es mit Jquery macht, aber Sie können den gleichen Effekt mit einfachem CSS und nur ein wenig JQuery erzielen ...

Wenn Sie beispielsweise ein div mit der Klasse 'box' haben, fügen Sie das folgende CSS hinzu

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

Verwenden Sie dann die AddClass-Funktion, um eine weitere Klasse mit einer anderen Hintergrundfarbe wie "hervorgehobenes Feld" oder ähnlichem mit dem folgenden CSS hinzuzufügen:

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

Ich bin ein Anfänger und vielleicht gibt es einige Nachteile dieser Methode, aber vielleicht ist sie für jemanden hilfreich

Hier ist ein Codepen: https://codepen.io/anon/pen/baaLYB

Normalerweise können Sie die Methode .animate () verwenden, um beliebige CSS-Eigenschaften zu bearbeiten. Für Hintergrundfarben müssen Sie jedoch das Farb-Plugin verwenden . Sobald Sie dieses Plugin hinzugefügt haben, können Sie etwas verwenden, das andere angegeben haben$('div').animate({backgroundColor: '#f00'}) , um die Farbe zu ändern.

Wie andere geschrieben haben, kann ein Teil davon auch über die jQuery-UI-Bibliothek durchgeführt werden.

Nur jQuery verwenden (keine UI-Bibliothek / Plugin). Sogar jQuery kann leicht eliminiert werden

//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);
}

Demo: http://jsfiddle.net/5NB3s/2/

• SetTimeout erhöht die Helligkeit von 50% auf 100%, wodurch der Hintergrund im Wesentlichen weiß wird (Sie können je nach Farbe einen beliebigen Wert auswählen).
• SetTimeout ist in eine anonyme Funktion eingebunden, damit es in einer Schleife ordnungsgemäß funktioniert ( Grund )

Abhängig von Ihrer Browserunterstützung können Sie eine CSS-Animation verwenden. Browser-Unterstützung ist IE10 und höher für CSS-Animation. Dies ist schön, so dass Sie keine Abhängigkeit von der Benutzeroberfläche von jquery hinzufügen müssen, wenn es sich nur um ein kleines Osterei handelt. Wenn es ein wesentlicher Bestandteil Ihrer Site ist (auch bekannt als IE9 und niedriger), wählen Sie die jquery UI-Lösung.

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

Erstellen Sie als Nächstes ein jQuery-Klickereignis, das die your-animationKlasse zu dem Element hinzufügt , das Sie animieren möchten, und das Ausblenden des Hintergrunds von einer Farbe zur anderen auslöst:

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

Ich habe ein super einfaches jQuery-Plugin geschrieben, um etwas Ähnliches zu erreichen. Ich wollte etwas wirklich Leichtes (es sind 732 Bytes minimiert), daher kam das Einfügen eines großen Plugins oder einer Benutzeroberfläche für mich nicht in Frage. Es ist immer noch etwas rau an den Rändern, daher ist Feedback willkommen.

Sie können das Plugin hier auschecken: https://gist.github.com/4569265 .

Mit dem Plugin ist es ganz einfach, einen Hervorhebungseffekt zu erzielen, indem Sie die Hintergrundfarbe ändern und dann ein hinzufügen setTimeout, um das Plugin auszulösen und zur ursprünglichen Hintergrundfarbe zurückzukehren.

So blenden Sie mit nur einfachem Javascript zwischen zwei Farben ein:

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);

Quelle: http://www.pagecolumn.com/javascript/fade_text.htm

Javascript wird ohne jQuery oder eine andere Bibliothek zu Weiß ausgeblendet:

<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>

Beim Drucken ist Gelb minus Blau. Wenn Sie also mit dem 3. RGB-Element (Blau) bei weniger als 255 beginnen, beginnt dies mit einer gelben Markierung. Dann erhöht das 10+Einstellen des var unBlueWertes das Minusblau, bis es 255 erreicht.