animate

[Casablanca]

Hallo Forum,

ich habe ein div-Element, dessen Breite ich via animate verändere (wie ein Progressbar).

  
$("#progressbar").animate({ width: 100 }, { duration: 1000 });  

Ich versuche nun eine Anzeige (Zähler/Counter) an der rechten Seite des Balkens zu integrieren, die sich gleichzeitig mit dem Balken erhöht oder vermindert, jenachdem ob die Breite des Balkens sich erhöht oder verringert. Wie kann man so etwas realisieren?

Gruß

[molily]

Hallo,

Ich versuche nun eine Anzeige (Zähler/Counter) an der rechten Seite des Balkens zu integrieren, die sich gleichzeitig mit dem Balken erhöht oder vermindert, jenachdem ob die Breite des Balkens sich erhöht oder verringert. Wie kann man so etwas realisieren?

Es ist möglich, eine Callback-Funktion anzugeben, die jeden Frame ausgeführt wird.

http://api.jquery.com/animate/

»step
Type: Function( Number now, Tween tween )
A function to be called for each animated property of each animated element.«

Mathias

[Casablanca]

Hallo,

vielen Dank.
Das habe ich bereits versucht. Die Schrittwerte (Step) sind aber sehr unregelmäßig, um damit etwas anfangen zu können:

  
$( "li" ).animate({  
   wert: 0  
}, {  
step: function( now, fx ) {  
   var data = fx.prop + ": " + now;  
   $( "body" ).append( "<div>" + data + "</div>" );  
}  
});  
  
  
wert: 0  
wert: 0.44501263170125815  
wert: 1.291330651507533  
wert: 2.695732058622735  
wert: 5.098621211969218  
wert: 6.962898649802818  
wert: 10.01576707564547  
wert: 13.821511040577539  
...  

Die Werte müssen eigentlich so aussehen und fortlaufend sein: 1, 2, 3, 4, 5, ...

Gruß

[1UnitedPower]

Meine Herren!

Die Werte müssen eigentlich so aussehen und fortlaufend sein: 1, 2, 3, 4, 5, ...

Dann zähl selber mit ;)

step: (function(){
   var i = 0;
   return function() {
      $( "body" ).append( "<div>" + i + "</div>" );
      i++;
   }
}())

[Casablanca]

Hallo,

vielen Dank. Das habe ich auch versucht. Man könnte es meinen, dass der Step-Bereich bei einer width: 100 auch 100 Mal aufgerufen wird. Das ist aber anscheint nicht der Fall. Die Aufrufe sind unterschiedlich zwischen 69 uns 76 Mal. Vielleicht übersiehe ich da etwas.

Gruß

[molily]

wert: 0
wert: 0.44501263170125815
wert: 1.291330651507533
wert: 2.695732058622735
wert: 5.098621211969218
wert: 6.962898649802818
wert: 10.01576707564547
wert: 13.821511040577539
...

>   
> Die Werte müssen eigentlich so aussehen und fortlaufend sein: 1, 2, 3, 4, 5, ...  
  
Das sind die berechneten Zwischenwerte der Eigenschaft sind, die du animierst. Wenn du von 0 bis 100px in 400ms Sekunden linear animierst, bekommst du irgendwelche unrunden Zwischenwerte, weil für jeden Frame (bei angestrebten 60fps) ein Wert berechnet wird. Den Wert, der dich interessiert, musst du ggf. berechnen. Dazu kannst du die Tween-Eigenschaften now, start und end verwenden und sie auf ganze Zahlen von 0 bis 100 abbilden.  
  
Das ist der zuständige jQuery-Code:  
<https://github.com/jquery/jquery/blob/master/src/effects/Tween.js>  
  
Mathias

-- 
[Chaplin.js - JavaScript application architecture on top of Backbone.js](http://chaplinjs.org/)