jQuery animieren, div-hintergrund-Farbverlauf?

Ich versuche zu bauen, ein hintergrund-animation mit jQuery, die änderungen von einem Farbverlauf zu einem anderen. Ich weiß, Sie können das .animate() Funktion zu ändern, hintergrund-Farben, aber kann dies auch für Steigungen?

Hier ist ein gutes Beispiel von alten Digg-style Kommentare. Ich bin auf der Suche, so etwas zu tun animieren von grün auf gelb

Wenden Sie sich mit diesem Jquery hintergrund animieren und JQuery Hintergrundfarbe animieren funktioniert nicht

InformationsquelleAutor Jake | 2012-06-09

UPDATE: in Diesen Tagen werden alle gängigen Browser unterstützen CSS-Animationen, die viel zuverlässiger ist als jQuery. Für Referenz, siehe Rohit ' s Antwort.

ALTE ANTWORT:

Animieren die Hintergründe direkt ist fast unmöglich mit jQuery, wenigstens konnte ich denken, auf keinen Fall. Es ist ein Weg, wenn auch mit diese:

-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;

Dafür sorgt, dass es ist ein übergang. So könnten Sie z.B. tun, dass in CSS:

.background_animation_element{

    -webkit-transition: background 5s ;
    -moz-transition: background 5s ;
    -ms-transition: background 5s ;
    -o-transition: background 5s ;
    transition: background 5s ;

    background: rgb(71,234,46);
    background: -moz-linear-gradient(top,  rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ea2e', endColorstr='#3f3f3f',GradientType=0 );

}

.background_animation_element.yellow{

    background: rgb(247,247,49);
    background: -moz-linear-gradient(top,  rgba(247,247,49,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0 );

}

Und Verwendung von jQuery, entweder das hinzufügen oder entfernen der gelben Klasse:

$('.background_animation_element').addClass('yellow');

Gewährleisten würden einen allmählichen übergang durch die transition duration-Eigenschaft in der CSS-Datei.

Ich habe darüber nachgedacht, aber ich bin nicht sicher, ob jQuery tatsächlich noch den Einsatz von css-übergänge beim hinzufügen einer Klasse dynamisch.
Oh ja, das tut es. Ich eigentlich tun, dass auf einigen Projekten meiner eigenen. Es ist nicht jQuery, obwohl das bedeutet, die übergänge.
Also ich habe gerade stolperte über dieses mit einem ähnlichen problem, aber ich kann nicht scheinen, um es zu arbeiten. Ich habe @arik-so wird 's Antwort und legen Sie es hier Ein übergang geschieht augenblicklich, fast so, als ob der übergang zwischen Farbverläufe nicht unterstützt. Ich bearbeitet dieses, und es funktioniert gut mit einem soliden hintergrund-Farbe.
Ein noch besseres Beispiel, der Farbverlauf nicht arbeiten, aber solide arbeiten hier ....vielleicht bin ich nur etwas albern, die verhindern, dass es funktioniert?
Ich denke, es ist prob am besten poste ich dies in eine neue Frage stellen.
Ich kann nicht ankommen dieses zu wirken es ignoriert 5s Dauer
CSS hintergrund-Farbverlauf übergänge sind nicht unterstützt in Chrome, FF oder Safari noch nicht. Gerücht hat es, die neuesten Edge unterstützt, aber ich habe nicht überprüfen. Die verlinkten jsfiddle zu zeigen, dass dies wahr ist (die "sehen" funktioniert, weil es den übergang zwischen festen Farben, keine Farbverläufe.) Die jQuery-version verlinkt unten ist nicht nur die bessere Antwort, weil es funktioniert, sondern weil es Antworten auf die Frage genauer.

InformationsquelleAutor arik

6

Animiert der hintergrund mit jQuery ist definitiv machbar, wie in diesem CodePen (nicht meine Schöpfung, aber sehr glatt):
http://codepen.io/quasimondo/pen/lDdrF

Der CodePen-Beispiel verwendet einige glatte bitshifting und andere tricks, um zu bestimmen, die Farben, aber er hat nur eine Funktion definiert (updateGradient), das ändert den hintergrund von CSS und dann Wickel es in ein setInterval.

Den großen zum mitnehmen aus dem updateGradient ist folgende:
```
 $('#gradient').css({
     background: "-webkit-gradient(linear, left top, right top, from("+color1+"),
   to("+color2+"))"}).css({
     background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
```
Dann nur die Farbe einstellen, die Variablen dynamisch und Sie sind toll.
- Kann ich mehrere Farben in der von() bis() Attribute zu handhaben, komplexe Verläufe (d.h. radial)?
InformationsquelleAutor lyyons

Versuchen, diese, großartige Arbeit -

CSS:

div{
     display:block; 
     width:500px; 
     height:250px;
     background: linear-gradient(270deg, #509591, #7bc446, #c0de9e, #b9dca4);
     background-size: 800% 800%;

     -webkit-animation: AnimationName 30s ease infinite;
     -moz-animation: AnimationName 30s ease infinite;
     animation: AnimationName 30s ease infinite;
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

HTML:

<div></div>

Quelle - https://www.gradient-animator.com/

InformationsquelleAutor Rohit Suthar

Brauchte ich es auch, ich such es in google. Aber er fand keine Lösung, so dass ich dieses Problem lösen. Ich mache mit dieser schmutzigen Art und Weise, aber hat geklappt 🙂
Das ist mein code:

interval = 0;
gradient_percent = 0;
interval_value = 5;
var interval_gradient = setInterval(function(){
    if(interval == 10) clearInterval(interval_gradient);

    gradient_percent += interval_value;
    $('.slider-text').css('background', 'linear-gradient(to right, #373535 '+gradient_percent+'%,rgba(0,0,0,0) 100%)');

    ++interval;
}, 50);

InformationsquelleAutor Zulfugar Ismayilzadeh

0

Können Sie versuchen,Backgroundor, es ist ein jquery-plugin für grandient animation.

Es ist so einfach, schreiben Sie einfach $('#yourDivId').backgroundor(); und es wird funktionieren! es hat auch eine Menge Optionen, wie ändern Sie den Grad des Verlaufs der Zeit in der animation.

InformationsquelleAutor Khaled Al-Ansari

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.