jQuery Animate() und BackgroundColor

Ich bin versucht, zu erstellen eine einfache Puls-Effekt, indem Sie die Hintergrundfarbe unter Verwendung von JQuery. Allerdings komme ich nicht an die backgroundColor zu animieren.

function show_user(dnid) {
    /* dnid is HTML ID of a div. */
    if (! $(dnid).is(':visible')) {
        $(dnid).show()
    }
    $('html, body').animate({scrollTop: $(dnid).offset().top});
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}

Was seltsam ist, dass diese Alternative animation:

$(dnid).animate({opacity: "toggle"}, 1200);

Aber es ist nicht das, was ich will, überhaupt.

Zusätzlich wird die show() und scroll-Funktionalität in der Funktion einwandfrei. Es ist einfach die Hintergrundfarbe der animation nicht.

Die obige Funktion wird aufgerufen, indem Sie diesem link
<a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Könnte mir jemand helfen animieren der Hintergrundfarbe?

=========

Danke an alle für die Hilfe. Viele ähnliche Antworten. Hier ist was ich landete mit

In meinem Kopf

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

Dann in meinem show_user Funktion direkt nach dem scroll-animation.

var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);

Gibt, der ein relativ schnelles rot "pulse", die zu ziehen die Augen des Benutzers.

Wieder, vielen Dank für die Hilfe.

  • Sie müssen verwenden Sie entweder jQuery UI, oder eine Farbe, plugin zum animieren von Farben.
  • Nicht sicher, ob dies immer noch der Fall, aber Jon Resig selbst eine hintergrund-plugin für ausschließlich zu animieren, hintergrund-Farben, es ist nicht etwas aufgebaut in jQuery.
  • Kann sein, dies sollte helfen, stackoverflow.com/a/14362680/297641
  • Ich denke, dass jQuery im Lieferumfang enthalten Farbe animation irgendwann wieder.. stackoverflow.com/a/14362680/297641
  • Ich stehe korrigiert! In welcher version von jQuery haben, dass Veränderungen auftreten? (Ich Frage, aber ich gehe mal auf die API im moment jedenfalls...). Nein, warten Sie: die API noch erklärt: "die Breite, Höhe, oder Links, die animiert werden können, aber die hintergrund-Farbe kann nicht sein, es sei denn, die jQuery.Farbe() plugin verwendet."
  • Funktioniert für mich in jQuery 1.9 jsfiddle.net/aaqHt
  • Wie es aussieht, wurde Hinzugefügt, in jQuery 1.9 release jqueryui.com/changelog/1.9.0 unter Effekte.
  • trotz der API (bzw. mein Missverständnis davon), Ihre demo definitiv beweist, dass es funktioniert. Komisch. Vielleicht ist jetzt die Zeit für einen espresso...
  • öffnen Sie Ihre Konsole und geben Sie $('#footer').animate({'background-color':'#000000'}, 1200) und beobachten Sie die Fußzeile gehen schwarz auf dieser Seite.
  • Mögliche Duplikate von jQuery animieren backgroundColor

InformationsquelleAutor fandingo | 2013-05-31
  1. 16

    jQuery nicht animiert werden die Farben standardmäßig. Um zum animieren von Farben, verwenden Sie die offizielle jQuery.Farbe plugin.

    Alle animierten Eigenschaften animiert werden soll, um einen einzelnen numerischen Wert, außer wie unten angegeben; die meisten Eigenschaften, die nicht-numerische können nicht animiert werden mit grundlegenden jQuery-Funktionen (Zum Beispiel Breite, Höhe, oder Links, die animiert werden können, aber die hintergrund-Farbe kann nicht sein, es sei denn, die jQuery.Farbe() plugin verwendet wird).

    Quelle

    • Wunderbar! Danke für die Erklärung, warum backgroundColor ausgeschlossen aus der standard-Bibliothek. Ich habe eine Lösung basierend auf Ihre Empfehlung.
    • warum nicht einfach animieren die css-Eigenschaft: $(dnid).animate({'background-color': "#db1a35"}, 1200); siehe meine Antwort unten
    • Danke! Sie löste meine Fragen.
    • Es ist in jQueryUI jsfiddle.net/aw42aj2L
    InformationsquelleAutor Nathaniel
  2. 4

    jQuery unterstützt animation zwischen numerische CSS-Eigenschaften, die keine Farben. Allerdings gibt es andere Bibliotheken, die machen animieren von Farben möglich. Eine solche Bibliothek ist die treffend benannte jQuery Farbe. Seine readme-Seite zeigt einige Beispiele, wie es zu benutzen, um die Animation zwischen Farben unter Verwendung der jQuery - .animate() Funktion

    • Genial. Ich wusste gar nicht, dass jQuery beschränkt Animationen auf numerische Eigenschaften. Vielen Dank für die ausführliche Erklärung.
    InformationsquelleAutor grandivory
  3. 2

    Verwenden Sie die CSS - animation Eigentum und keyframes

    Sehen Sie es in Aktion

    HTML

    <div></div>

    CSS

    div {
    background-color: red;
    height: 200px; width: 200px;
    -webkit-animation: pulse 1s ease-in 0 infinite normal both;
    -moz-animation: pulse 1s ease-in 0 infinite normal both;
    -o-animation: pulse 1s ease-in 0 infinite normal both;
    animation: pulse 1s ease-in 0 infinite normal both;
}

@-webkit-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-moz-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-ms-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-o-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
    • Danke für diese einfache Möglichkeit für die Erstellung dieser Effekt!
    • Du bist willkommen :) vergessen Sie nicht, cross-browser-Kompatibilität, wenn Sie planen, es zu benutzen in der Produktion
    • Gebrochen auf Firefox 27.0.1
    InformationsquelleAutor Sourabh
  4. 0

    müssen Sie zuerst den hintergrund an die Farbe oder es wird nicht alles tun, 2. mal um.
    Sie auch typoed die css-Eigenschaft 'background-color' und setzen es in Anführungszeichen, wie ich nicht 🙂

    $(dnid).css({'background-color': "#ffffff"});

$(dnid).animate({'background-color': "#db1a35"}, 1200);
    • Wenn es gibt andere Stil-Eigenschaften auf die Sache, die Sie nicht zurücksetzen wollen, können Sie nur $(dnid).css('background-color', '#ffffff');
    • Funktioniert das? Können Sie dieses jsFiddle? Ich konnte nicht diese für mich zu arbeiten.
    • Sorry @Chud37 es stellt sich heraus, dass ich Gebrauch machen, die jQueryUI-Bibliothek für die animation der Farben. jsfiddle.net/aw42aj2L
    InformationsquelleAutor Milo LaMar
  5. 0

    Fügen Sie einfach unten Ihre jQuery-script und schon sind Sie fertig:

    <script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
    InformationsquelleAutor Darush
Schreibe einen Kommentar