eine Hintergrundfarbe mit Jquery Wie verblassen Sie in / out?

Question

Wie kann ich in Textinhalt mit jQuery verblassen?

Der Punkt ist, die Aufmerksamkeit des Benutzers auf die Nachricht zu ziehen.

Answer 1

Diese exakte Funktionalität (glow 3 Sekunden eine Nachricht markieren) in dem jQuery UI als Highlight-Effekt realisiert

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

Farbe und Dauer sind variabel

Answer 2

Wenn Sie wollen speziell die Hintergrundfarbe eines Elements animieren, ich glaube, Sie brauchen jQueryUI Rahmen einzubeziehen. Dann können Sie tun:

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

jQueryUI hat einige eingebaute Effekte, die Ihnen auch nützlich sein können.

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

Answer 3

Ich weiß, dass die Frage, wie es mit Jquery zu tun, aber Sie können die gleichen Auswirkungen auf mit einfachen CSS und nur ein wenig jquery ...

erreichen

Zum Beispiel haben Sie eine div mit 'Box' Klasse, fügen Sie den folgenden 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;
}

und verwenden Sie dann AddClass Funktion eines andere Klasse mit unterschiedlicher Hintergrundfarbe hinzufügen wie ‚Feld markiert‘ oder so ähnlich mit folgendem CSS:

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

Ich bin ein Anfänger und vielleicht gibt es einige Nachteile dieser Methode aber vielleicht wird es für jemanden nützlich sein

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

Answer 4

In der Regel können Sie mit dem .animate () Methode beliebige CSS-Eigenschaften zu manipulieren, sondern auch für Hintergrundfarben müssen Sie die Farbe Plugin rel="nofollow. Sobald Sie dieses Plugin enthalten, können Sie etwas verwenden, wie andere $('div').animate({backgroundColor: '#f00'}) angegeben haben, um die Farbe zu ändern.

Wie schon andere geschrieben haben, können einige dieser auch die jQuery UI-Bibliothek durchgeführt werden.

Answer 5

Mit nur jQuery (keine UI-Bibliothek / Plugin). Auch kann jQuery leicht beseitigt 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% bis 100%, im Wesentlichen den Hintergrund weiß machen (Sie einen beliebigen Wert wählen können auf Ihrer Farbe abhängig).
• SetTimeout wird in einer anonymen Funktion eingewickelt, damit sie richtig in einer Schleife arbeiten ( Grund )

Answer 6

Je nach Browser-Unterstützung, können Sie eine CSS-Animation verwenden. Browser-Unterstützung ist IE10 und sich für CSS-Animation. Das ist schön, so dass Sie müssen nicht jquery UI Abhängigkeit wenn es nur ein kleines Osterei hinzuzufügen. Wenn es ein integraler Bestandteil Ihrer Website (aka für IE9 benötigt und unten) gehen mit der 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;}
}

Als nächstes ein jQuery click-Ereignis erstellen, das die your-animation Klasse mit dem Element hinzufügt Sie animieren wollen, die Auslösung der Hintergrund von einer Farbe zur anderen Verblassen:

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

Answer 7

Ich schrieb eine super einfach jQuery-Plugin etwas ähnliches wie dies zu erreichen. Ich wollte etwas wirklich geringes Gewicht (es ist 732 Bytes minimiert), so mit einem großen Plugin oder UI war indiskutabel für mich. Es ist immer noch ein wenig rau an den Rändern, so Feedback ist willkommen.

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

das Plugin verwenden, wäre es eine einfache Sache sein, einen Highlight-Effekt zu erzeugen, indem Sie die Hintergrundfarbe ändern und dann einen setTimeout Hinzufügen der Plugin Feuer wieder auf die ursprüngliche Hintergrundfarbe zu verblassen.

Answer 8

Um verblassen zwischen zwei Farben nur einfach mit Hilfe von 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);

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

Answer 9

Javascript-Fade weiß ohne jQuery oder andere Bibliothek:

<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, so mit dem dritten rgb ab Elemente (blau) bei weniger als 255 beginnt mit einem gelben Highlight. Dann wird die 10+ den var unBlue Wert bei der Einrichtung erhöht das Minus-Blau bis 255 erreicht hat.