Wie zu animieren eine Füllung mit jQuery

War ich mit 

element.css('fill','#000000');

und es funktioniert, aber jetzt möchte ich animieren, ein füllen, also schrieb ich dies:

$(element).animate({'fill': '#000000'}, 'slow');

aber das funktioniert nicht, warum? Ich möchte hinzufügen, ich arbeite an der SVG-Datei.

  • Was erwartest du animieren? Sind Sie auf der Suche nach einem fadeIn, Befüllung von oben bis unten, von Links nach rechts, zebra Streifen ?
  • Können Sie Ihre HTML-oder erstellen Sie eine Fiedel im jsfiddle.net?
  • fill ist die Farbe von dem element, das Sie gerade zeichnen, nicht auf den Akt der Füllung bis
InformationsquelleAutor user3263919 | 2014-02-02
  1. 14

    Angabe des übergangs als Teil der CSS ist vielleicht einfacher als das hinzufügen einer anderen js lib: 

    $('#circle').css({fill: "red", transition: "2.0s"});
    • sollte dies der akzeptierte Lösung
    InformationsquelleAutor patb
  2. 4

    Können Sie erwägen, die Verwendung von jQuery-UI. Seine .animate () - Funktion nicht unterstützen, animieren Sie die fill-Eigenschaft standardmäßig. Aber wie es verwendet die jQuery-Color-Plugin zum animieren von Farben, können Sie einfach jQuery verwenden.Farbe.Haken (), um zusätzliche css-Eigenschaften animiert werden. Sehen Dokumentation.

    jQuery.Color.hook( "fill stroke" );

    Demo

    InformationsquelleAutor mrgrain
  3. 3

    JQuery nicht keine Unterstützung für die animation der SVG-Elemente, noch JQuery UI. Sie können jedoch, verwenden Sie die JQuery SVG plugin, und das tun die folgende.

    $('#circle').animate({ svgFill: 'red' }, 4000);

    Demo auf JSFiddle

    InformationsquelleAutor John S
Schreibe einen Kommentar