Ändern der Hintergrundfarbe mit jquery animieren

Habe ich folgenden html-code: `

<html> 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      backgroundColor: '#f5f5f5',
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>`

Aber ich bin nicht in der Lage zu chnage die Hintergrundfarbe wie bereits erwähnt mithilfe animieren.
Bitte lassen Sie mich wissen, was falsch ist?

Dank
Smitha

InformationsquelleAutor Smitha | 2013-12-12

  1. 9

    Zur Unterstützung hintergrund-Farbe ändert, müssen Sie entweder jQuery UI oder jQuery color Bibliotheken

    Von Docs

    Zum Beispiel Breite, Höhe, oder Links, die animiert werden können, aber
    hintergrund-Farbe kann nicht sein, es sei denn, die jQuery.Farbe() plugin verwendet wird

    $(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            backgroundColor: 'red',
        });
    });
});

    Demo: jQuery UI

    Demo: jQuery Farbe

    So fügen Sie

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>

    InformationsquelleAutor Arun P Johny

  2. 6

    Ich hatte das gleiche problem und es stellt sich heraus, dass es effektiver war, mit dem add/remove-Klassen mit JS und fügen CSS3 transition innerhalb Sie haben meine Farbe übergang:

    CSS
.firstColor{
background-color: #000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.secondColor{
background-color: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

JS

if (your condition) {
    $("#yourID").removeClass('secondColor').addClass('firstColor');
}
else{
    $("#yourID").removeClass('firstColor').addClass('secondColor');
}

    Hoffe es hilft 🙂

    Die Frage, wie ändern hintergrund-Farbe mit animate Methode. Hinzufügen/entfernen-Klasse ist eine alternative zum immer gleichen Ergebnis, aber nicht das Ziel.
    vielen Dank, das funktioniert für mich.
    Dies ist eine bessere Lösung als .animieren(), Dank!

    InformationsquelleAutor Meira

Schreibe einen Kommentar