it-swarm.com.de

Wie blendet man eine Hintergrundfarbe mit Jquery ein/aus?

Wie blende ich Textinhalte mit jQuery ein?

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

90
mrblah

Diese exakte Funktionalität (3 Sekunden, um eine Nachricht hervorzuheben) wird in der jQuery-Benutzeroberfläche als Highlight-Effekt implementiert

http://docs.jquery.com/UI/Effects/Highlight

Farbe und Dauer sind variabel

88
micmcg

Wenn Sie die Hintergrundfarbe eines Elements speziell animieren möchten, müssen Sie das jQueryUI-Framework einbinden. 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/

86
user113716

Ich weiß, dass die Frage war, wie es mit Jquery geht, aber Sie können den gleichen Effekt mit einfachen CSS und nur einem kleinen Jquery erzielen ...

Zum Beispiel, Sie haben ein div mit 'box' Klasse, 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;
}

und fügen Sie dann mit der AddClass-Funktion eine andere Klasse mit einer anderen Hintergrundfarbe hinzu, wie z. B. 'hervorgehobenes Feld' oder ähnliches mit folgendem CSS:

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

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

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

18
NoDisplayName

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

Wie andere bereits geschrieben haben, kann ein Teil davon auch mit der jQuery-UI-Bibliothek ausgeführt werden.

14
Ryan

Nur mit jQuery (keine UI-Bibliothek/Plugin). Selbst 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 einen beliebigen Wert je nach Farbe auswählen). 
  • SetTimeout ist in eine anonyme Funktion eingebunden, damit es in einer Schleife ordnungsgemäß funktioniert ( reason
9
user

Je nach Browserunterstützung können Sie eine CSS-Animation verwenden. Browser-Unterstützung ab IE10 für CSS-Animationen. Dies ist Nizza, so dass Sie keine Jquery-UI-Abhängigkeit hinzufügen müssen, wenn es nur ein kleines Osterei ist. Wenn es in Ihre Site integriert ist (auch für IE9 und darunter erforderlich), verwenden 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-Click-Ereignis, das die your-animation-Klasse zu dem Element hinzufügt, das Sie animieren möchten, wodurch der Hintergrund von einer Farbe zu einer anderen verblasst:

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

Ich habe ein super einfaches jQuery-Plugin geschrieben, um so etwas zu erreichen. Ich wollte etwas wirklich geringes Gewicht (es sind 732 Byte minimiert), daher kam für mich ein großes Plugin oder eine Benutzeroberfläche nicht in Frage. Es ist immer noch ein bisschen rau an den Rändern, daher ist Feedback willkommen.

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

Mit dem Plugin wäre es ganz einfach, einen Highlight-Effekt zu erzeugen, indem Sie die Hintergrundfarbe ändern und dann eine setTimeout hinzufügen, um das Plugin auszulösen und die ursprüngliche Hintergrundfarbe wieder anzuzeigen.

4
Dominic P

So blenden Sie mit zwei einfachen Farben 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

3
Curtis Yallop

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, also beginnt das 3. rgb-Element (blau) bei weniger als 255 mit einer gelben Markierung. Dann erhöht der 10+ beim Einstellen des var unBlue-Werts das Minus-Blau bis zu 255.

0
gordon