jQuery Animations-Intervall ändern

In jQuery ist das Intervall für die Bildwiederholrate auf 13 ms intern festegelegt. Für sehr viele parallele Animationen ist es sinnvoll dieses Interval zu vergrößern.

Für viele Effekte und Animationen im Web sind keine gesonderten Plugins wie Flash oder Sliverlight nötig. Moderne Browser in Verbindung mit leistungsfähigen Computern machen auch die Animation der CSS-Eigentschaften per Javascript möglich. Die jQuery-Bibliothek bietet hier weitreichende Funktionen.

Wie erstellt jQuery nun eine Animation? Eine CSS Eigenschaft, z.B. die Position top: 100px soll nach top: 200px in einer Zeit von 2s animiert werden. Hierzu werden die 100px Weg in äquidistante Stücke zerlegt. Wie groß ein einzelnes Wegstück ist, wird vom internen Takt des Animations-Timers bestimmt. Das Timer-Intervall ist bei jQuery standardmäßig auf 13ms eingestellt. Für unsere 2s Animation werden also ca. 154 Animations-Schritte benötigt. Folglich wird die Position des Elements pro Schritt um 0.65px verändert.

Und hier liegt das Problem: Der Browser ist nicht in der Lage Bruchteile von Pixeln sinnvoll darzustellen. Es wird auf ganze Pixel gerundet. Die hohe Zeitauflösung hat für die Animation einer kurzen Strecke in einem relativ langen Zeitintervall also gar keinen Vorteil. Ganz im Gegenteil: Bei vielen paralleln Animationen wird der Browser unnötig belastet oder die Animation sogar unbrauchbar. Auch verhalten sich hier die Browser völlig unterschiedlich: Chrome zeigt meist eine Animationen flüssig an, die im Internet Explorer nicht mehr zu erkennen ist.

Wenn man die eigenen Animationen in einem jQuery-Plugin kapselt, kann auch nur für dieses Plugin die Geschwindigkeit der Bildfolge geändert werden:

(function($){
    jQuery.fx.prototype.custom = function( from, to, unit ) {
        this.startTime = now();
        this.start = from;
        this.end = to;
        this.unit = unit || this.unit || "px";
        this.now = this.start;
        this.pos = this.state = 0;

        var self = this;
        function t( gotoEnd ) {
            return self.step(gotoEnd);
        }

        t.elem = this.elem;

        if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {
            //timerId = setInterval(jQuery.fx.tick, 13);
            jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 250);
        }
    }

    $.fn.extend({

        your_plugin: function(options) { 
            /* Your plugin here */
        }

    });
})(jQuery);

Im obigen Intervall wird das Intervall in Zeile 19 auf 250ms gesetzt.