Kontinuierlicher Bildlauf bei Hover [Leistung]

7

Ich habe eine jQuery-Funktion erstellt, die ein DIV scrollt, indem der linke Rand des Elements verkleinert wird. Es funktioniert, aber es ist unglaublich langsam. Es frißt 100% CPU in kürzester Zeit: s

%Vor%

Offensichtlich laufe ich diese Funktion alle 8ms, was sehr viel verlangt. Ich cache bereits meine Selektoren, daher weiß ich nicht, was ich tun kann, um die Leistung zu verbessern. Gehe ich gerade falsch herum?

    
thv20 18.04.2012, 23:36
quelle

2 Antworten

23

jsFiddle-Demo

%Vor%

Dies ist wirklich einfach ohne setInterval oder gar setTimeout.

  • Die einzige wichtige Sache ist zu wissen, dass .animate() einen Funktionsrückruf akzeptiert, ideal für unseren Zweck, um eine Schleife zu erstellen. Stellen Sie sicher, dass Sie linear easing anstelle des standardmäßigen "Swing" verwenden, um unsere Schleife konstant zu halten.
  • Um unsere Animationen zu stoppen, können wir stop() verwenden, um Animationserweiterungen zu verhindern.
  • Erstellen Sie einfach zwei Funktionen und verwenden Sie sie in Ihrer hover -Methode.

Bearbeiten:

Verwenden von CSS3 und Umschalten von Wiedergabe- / Pausenklassen mit jQuery:

%Vor%

CSS:

%Vor%

jsFiddle-Demo

    
Roko C. Buljan 19.04.2012, 00:35
quelle
1

.animate () ist ein guter Weg, dies zu tun. Beispiel:

%Vor%

Arbeitsdemo

Lesen Sie die Dokumentation, um zu erfahren, wie Sie sie verwenden können.

    
Alp 18.04.2012 23:44
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset C # string zu DateTime mit Zeitzone