jQuery verlangsamt die Fade-Animation

Question

Ich verwende pagify.js für eine Seite Seite. Als Standard-fade out dort ein Augenblick ist/Einblendung, wenn ich auf eine andere Seite klicken, hier ist der Code:

$('#page_holder').pagify({ 
     pages: ['about', 'directory', 'archive','contribute'], 
     animationOut: 'fadeOut', 
     animationOutSpeed: '100', 
     animation: 'fadeIn', 
     animationSpeed: '100', 
     'default': 'about', 
     cache: true 
    }); 

Das ist großartig, aber es ist zu schnell, im Idealfall, wenn ich auf eine andere Seite klicken ich mag sowohl die fadeOut/fadeIn mit viel langsameren Geschwindigkeiten ausgeführt werden.

Ich habe versucht, fast, slow sowie verschiedene Millisekunden auf die Animationen anzuwenden, aber nichts scheint sich zu ändern.

Answer 1

Pagify.js verwendet jQuery eigene Animationsfunktionen. jQuery verwendet tatsächliche Zahlen für seine Animationsdauerwerte. Die einzigen erlaubten Zeichenfolgenwerte sind 'fast' und 'slow', und diese werden verwendet, um tatsächlich vordefinierte Zahlen nachzuschlagen. Bei jeder anderen Zeichenfolge wird ein Standardwert verwendet. Technisch "_default" könnte auch verwendet werden, aber es ist sinnlos, es tatsächlich zu verwenden, da es sowieso auf diesen Standard eingestellt wird.

So, da Sie in der String-Version von 100 sind vorbei: "100", jQuery tat den folgenden (einem entsprechenden Code-Schnipsel unten), um am Ende wird

1. if(typeof "100" !== "number")

   wahr, weil es " string“

2. if("100" in jQuery.fx.speeds)

   falsch, Geschwindigkeiten hält nur schnell, langsam, und

3. opt.duration = jQuery.fx.speeds._default;

   die Standarddauer eingestellt _default.

Fix: Verwendung tatsächliche Zahlen anstelle von String-Versionen von ihnen.

---

vordefinierten jQuery Geschwindigkeiten

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L691

jQuery.fx.speeds = { 
    slow: 600, 
    fast: 200, 

    // Default speed 
    _default: 400 
}; 

jQuerys belebte Funktion

ruft die Funktion speed() auf, um die richtigen Einstellungen/Methoden zu erhalten.

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L514

animate: function(prop, speed, easing, callback) { 
    var empty = jQuery.isEmptyObject(prop), 
     optall = jQuery.speed(speed, easing, callback), 

Geschwindigkeit() Funktion

die korrekte Dauer Bestimmung

https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js#L472

zu verwenden,

if (typeof opt.duration !== "number") { 
    if (opt.duration in jQuery.fx.speeds) { 
     opt.duration = jQuery.fx.speeds[ opt.duration ]; 

    } else { 
     opt.duration = jQuery.fx.speeds._default; 
    } 
} 

Answer 2

Haben Sie versucht, animationSpeed ​​auf eine Zahl anstelle einer Zeichenfolge zu setzen? Wie 100 anstelle von '100'