Wie blendet man eine Hintergrundfarbe mit jquery ein / aus?

96

Wie kann ich Textinhalte mit jQuery einblenden?

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

mrblah
quelle
1
Sie müssen die Farb- oder UI-Plugins nicht zum Animieren der Hintergrundfarbe verwenden. Ich habe diese Frage beantwortet hier .
Matadur

Antworten:

90

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

micmcg
quelle
52
$ ('newCommentItem'). effect ("Highlight", {}, 3000);
Ravi Ram
5
Ein weiteres Beispiel zum Ändern der Farbe: $ (Element) .effect ("Hervorheben", {Farbe: 'Blau'}, 3000);
Jorge Olivares
@ RaviRam - perfekt!
Knieschützer
90

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/

user113716
quelle
3
Ich musste dafür "jQuery Color" einfügen, was auch in den jquery-Dokumenten enthalten ist ( "(Zum Beispiel können Breite, Höhe oder Links animiert werden, Hintergrundfarben jedoch nicht, es sei denn, das jQuery.Color-Plugin wird verwendet)" ).
Boris
'slow'kann durch Sekunden ersetzt werden ... wobei 1000 1 Sekunde entspricht ... und so weiter.
Pathros
25

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

NoDisplayName
quelle
Kühle Lösung. Danke dir.
2.
Dies ist eine großartige Lösung, die ohne zusätzliche Bibliotheken funktioniert und in allen modernen Browsern nativ unterstützt wird. Vielen Dank!
Rprez
14

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.

Ryan
quelle
9

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 )
Benutzer
quelle
8

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");
});
Rich Finelli
quelle
2
Dies ist bei weitem die beste Lösung. Hier ist Demo in JSfiddle.net
Ricardo Zea
4

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.

Dominic P.
quelle
Dominik P: Danke für dein 'kleines' Plugin. Es passt gut zu meinen Bedürfnissen!
Psulek
3

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

Curtis Yallop
quelle
0

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.

Gordon
quelle