it-swarm.com.de

jQuery Animate () und BackgroundColor

Ich versuche, einen einfachen Pulse-Effekt zu erstellen, indem Sie die Hintergrundfarbe mit JQuery ändern. Ich kann die backgroundColor jedoch nicht 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);
}

Seltsam ist, dass diese alternative Animation funktioniert:

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

Aber ich will es gar nicht.

Zusätzlich funktionieren die show () - und Scroll-Funktionen in der Funktion einwandfrei. Es ist nur die Hintergrundfarbanimation, die nicht funktioniert.

Die obige Funktion wird über diesen Link aufgerufen. <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Könnte mir jemand helfen, die Hintergrundfarbe zu animieren?

=========

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

In meinem Header

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

Dann in meiner show_user-Funktion direkt nach der Scroll-Animation.

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

Dies ergibt einen relativ schnellen roten "Impuls", der die Augen des Benutzers anzieht.

Nochmals vielen Dank für die Hilfe.

7
fandingo

jQuery kann Farben standardmäßig nicht animieren. Um Farben zu animieren, verwenden Sie das offizielle jQuery.Color plugin.

Alle animierten Eigenschaften sollten mit einem einzigen numerischen Wert animiert werden, außer wie unten angegeben. Die meisten nicht-numerischen Eigenschaften können nicht mit den grundlegenden jQuery-Funktionen animiert werden (z. B. Breite, Höhe oder links können animiert werden, Hintergrundfarben jedoch nur, wenn das Plug-In jQuery.Color () verwendet wird).

Quelle

16
Nathaniel

jQuery unterstützt Animationen zwischen beliebigen numerischen CSS-Eigenschaften, die keine Farben enthalten. Es gibt jedoch auch andere Bibliotheken, die das Animieren von Farben ermöglichen. Eine solche Bibliothek ist die passend benannte jQuery Color . Seine Readme-Seite zeigt mehrere Beispiele, wie mit der jQuery-Funktion .animate() zwischen Farben animiert wird

4
grandivory

Verwenden Sie die CSS-Eigenschaft animation und keyframes.

In Aktion sehen

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; }
}
2
Sourabh

sie müssen zuerst den Hintergrund auf die Von-Farbe setzen, sonst wird es nicht zum 2. Mal gemacht. Sie haben auch die CSS-Eigenschaft 'background-color' getippt und in Anführungszeichen gesetzt, wie ich es nicht getan habe :)

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

$(dnid).animate({'background-color': "#db1a35"}, 1200);
0
Milo LaMar

Fügen Sie dies einfach unter Ihr jQuery-Skript ein und Sie sind fertig:

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