Progress Bars, also Fortschrittsanzeigen, sind eine gute Möglichkeit zur Visualisierung von Fortschritten. Eine datumsbasierte Progress Bar, die den Fortschritt von einem Startdatum zum Enddatum visualisiert, habe ich auf meiner neuen Studienseite eingebaut.

Demo

DEMO

HTML:

<progress id="progressbar" value="" max="100"></progress>
<div class="progress-value"></div>
<div class="clear"></div>
<div id="progress-days">
  <p>Vergangene Tage:  <span id="days-spend"></span></p>
  <p>Verbleibende Tage: <span id="days-left"></span></p>
  <p>Tage gesamt:  <span id="days-total"></span></p>
</div>

HTML spielt also nur den Platzhalter für die wichtigen Elemente. Wichtig ist nur, dass der max Wert der Progress Bar auf den gewünschten Wert gesetzt ist. Dieser wird von Javascript ausgelesen.

Apropos, Javascript:

$(document).ready(function() {

/**
 * #########################
 *  Time-Based Progress Bar
 * #########################
 * @name	Time-Based Progress Bar
 * @desc	Datumsbasierte Fortschrittsanzeige 
 * @author	Hannes Schurig
 * @date	2013-06-27
 * @lastmodified	2013-06-30
 * @version	0.1
 *
 * @ref http://studium.hannes-schurig.de
 * @see http://studium.hannes-schurig.de
 */

	// Progress Bar Management
	// nice short introduction: http://www.hongkiat.com/blog/html5-progress-bar/
	var progressbar = '#progressbar',
		startDate = [2012,04,01], endDate = [2015,04,01],
		max = $(progressbar).attr('max'),
		finishedSeconds = 0, finishedPercent = 0, finishedPercentRound = 0,
		daysSpend = daysSince(startDate[0],startDate[1],startDate[2]), 
		daysLeft = daysUntil(endDate[0],endDate[1],endDate[2]),
		daysTotal = daysSpend + daysLeft;

	function calculateProgressedPercent() {
		finishedSeconds = ((new Date() - new Date(startDate[0],startDate[1]-1,startDate[2])) / 1000);
		totalSeconds = daysTotal * 86400; // days total to seconds
		finishedPercentRound = Math.round(((finishedSeconds * 100) / totalSeconds) * 10000) / 10000;
		$(progressbar).val(finishedPercentRound);
		$('.progress-value').html(finishedPercentRound + '%');
		return finishedPercentRound;
	}	
	
	calculateProgressedPercent();
	
	// setting up timer for recalculating the progressbar
	var animate = setInterval(function() {
	    var finishedPercentRound = calculateProgressedPercent();
	    if (finishedPercentRound >= max) {
	        clearInterval(animate);			           
	    }
	}, 5000);
	
	// days until... adapted the following function:
	// see: http://stackoverflow.com/questions/1854410/shopping-days-till-christmas-counter-jquery
	function daysUntil(year, month, day) {
	  var now = new Date(),
		  dateEnd = new Date(year, month - 1, day), // months are zero-based
		  days = (dateEnd - now) /1000/60/60/24;   // convert milliseconds to days
	
	  return Math.round(days);
	}
	// adapted for own daysSince function
	function daysSince(year, month, day) {
	  var now = new Date(),
		  dateStart = new Date(year, month - 1, day), // months are zero-based
		  days = (now - dateStart) /1000/60/60/24;   // convert milliseconds to days
	
	  return Math.round(days);
	}
	
	// dates to html and update
	$('#days-spend').html(daysSpend);
	$('#days-left').html(daysLeft);
	$('#days-total').html(daysTotal);

});

Okay, let’s go through:
In den Zeilen 20 und 21 müsst ihr die ID der Progress Bar und das gewünschte Start- und Enddatum eintragen; der Rest läuft dann von selbst.
Die Zeilen 22 bis 26 errechnen ein paar initiale Werte, die später noch gebraucht werden.
In der Funktion

calculateProgressedPercent()

wird der Prozentwert der bereits verstrichenen Zeit angezeigt. Dieser wird auch direkt als Wert der Progress Bar in Inhalt des Overlays gesetzt und dann zurückgegeben. Funktionalität und Anzeige könnte man hier natürlich trennen.
Die Zeile 31 bestimmt übrigens am Ende die Anzahl der Nachkommastellen des Prozentwertes. An der Stelle

* 10000) / 10000

könnt ihr also Nullen entfernen oder anhängen um den Prozentwert zu verändern.
Zeile 37 führt diese Funktion beim Seitenaufruf ein Mal initial auf.
Zeile 40 bis 45 setzen einen Timer, der alle 5 Sekunden diese Funktion aufruft; bis der Prozentwert den max Wert der Progress Bar überschreitet.
Die 2 Datumsfunktionen errechnen die Anzahl der Tage von 2 Szenarien: Startdatum bis heute und heute bis Enddatum.
Und die letzten 3 Zeilen schreiben diese Tagesanzahl einfach nur zur Übersicht auf die Seite.

Sicherlich lassen sich die Berechnungen und der Code an sich noch optimieren. Aber die Sache läuft ganz rund.

jQuery Animationen sind einfach:

animation()

,

fadeToggle()

und

slideToggle()

erledigen die Arbeit schnell und unkompliziert. Es kann jedoch kompliziert werden, wenn man Animationen nacheinander abarbeiten möchte.
Generell werden Animationen „gleichzeitig“ ausgeführt, außer sie betreffen das selbe Objekt.
Verschiedene Objekte zeitverzögert zu animieren kann schon schwierig werden.

Ausgangssituation

2 Objekte mit je einer Animation:

$('#a').animate({
	width: '-=10px',
	height: '-=10px'
}, 2000, function() {
	// callback
});
$('#b').animate({
	width: '-=20px',
	height: '-=20px'
}, 2000, function() {
	// callback
});

2 Objekte, die gleichzeitig animiert werden obwohl der Code dies nicht vermuten lässt.

Demo

DEMO

Es gibt verschiedene Herangehensweisen für dieses Problem.

Lösung? callback()!

callback()

‚, oder auch

complete()

in der jQuery API Doc (Beispiel

animate()

), ist eine Funktion, die beim erfolgreichen Beenden einer Animation ausgeführt wird.
Ein Beispiel:

$('#b').animate({
	width: '-=10px',
	height: '-=10px'
}, 2000, function() {
	$('#a').animate({
		width: '-=20px',
		height: '-=20px'
	}, 2000, function() {
		// callback
	});
});

In der

callback()

Funktion können weitere Befehle folgen, die nach der beendeten Animation ausgeführt werden sollen.

Demo

DEMO

Alternative? delay()!

Den meisten jQuery Animationen kann man durch die Verwendung von

delay()

eine Pause anhängen. Die folgenden Befehle beziehen sich somit auf das selbe Objekt, sind aber zeitlich verzögert. Diese Methode ist nur auf Animationen anwendbar, die die Browser ‚effects queue‘ (auch ‚fx-queue‘ genannt) verwenden.

$('#a')
 .animate({
	width: '-=20px',
	height: '-=20px'
 }, 2000)
 .delay(2000)
 .fadeToggle()
 .delay(2000)
 .fadeToggle();
$('#b')
 .animate({
	width: '-=10px',
	height: '-=10px'
 }, 500)
 .delay(500)
 .slideToggle()
 .delay(500)
 .slideToggle();

Die verschiedenen Animationen sind nun zeitlich verzögert.

Demo

http://public.hannes-schurig.de/LocationMapDemo/map.php
Nach einem

objectA.delay()

Befehle folgen zu lassen, die auf ein anderes Objekt wirken sollen, geht meines Wissens nach nicht. Zwei Objekte zeitlich verzögert animieren geht damit also nicht. Dafür hilft aber die nächste Lösung!

Nun kommt es in jQuery jedoch oft vor, dass Befehle keine Animationen sind und somit weder ein callback besitzen noch ein delay verstehen. Solche Funktionen sind beispielsweise

html()

,

append()

,

css()

,

addClass()

oder

removeClass()

. Mit der folgenden Lösung lassen sich auch solche Funktionen zeitlich verzögert abarbeiten!

Lösung? queue()!

Die Funktion

queue()

erstellt eine ‚effects queue‘ Befehlskette, die beliebig gefüllt und dann abgearbeitet werden kann. Wie oben erklärt kann man das Ausführen von Befehlen innerhalb einer ‚effects queue‘ durch Anwendung von

delay()

zeitlich verzögern.

queue().delay()

ermöglicht es damit beliebige Befehle zeitlich verzögert auszuführen.

Der grobe Aufbau sieht wie folgt aus:

$(object).queue(function(param) {
	// Befehle
$(param).dequeue();
}).delay(1000).queue(function(param) {
	// Befehle nach 1 Sekunde Pause
$(param).dequeue();
});

Das Finale!

Hier das obrige Beispiel leicht angepasst: erst verändert sich Block #a in mehreren Schritten und erst danach Block #b:

$('#a').queue(function(next) {
	// 2 Sekunden Pause vor dem ersten Befehl
	$(next).dequeue();
}).delay(1000).queue(function(next) {
	$(this).css("background-color", "red");
	$(next).dequeue();
}).delay(1000).queue(function(next) {
	$(this).addClass("test");
	$(next).dequeue();
// block #b wird nun verändert:
}).delay(1000).queue(function(next) {
	$('#b').css("background-color", "red");
	$(next).dequeue();
}).delay(1000).queue(function(next) {
	$('#b').addClass("test");
	$(next).dequeue();
}).delay(1000).queue(function(next) {
	$('#b').animate({
		top: '+=150px'
	}, 1000);
	$(next).dequeue();
});

Demo

DEMO
BHAM! Zeitlich verzögerte Verarbeitung von beliebigen Befehlen von mehreren Objekten!

Update:
Mit der Javascript Funktion

setTimeout()

lassen sich auch extrem easy beliebige Elemente/Befehle zeitversetzt ausführen:

$("#signup-form input").addClass("success");
setTimeout(function (){
	$('#signup-carousel').carousel("next");
}, 2000);

Schande auf mein Haupt, dass ich das damals nicht schon kannte.

Die

queue()

Funktion kann man dabei direkt von dem Element aufrufen, dass animiert oder verändert werden soll, und innerhalb der

queue()

dann

$(this)

benutzen. Alternativ kann man auch ein globaleres Objekt benutzen, zum Beispiel

$(window).queue()

.

Damit sollte ich das Thema zeitverzögerte Animationen zu genüge beleuchtet haben. Bei meinem letzten Webprojekt spielte dieses Thema eine große Rolle und ich musste viel rumprobieren und testen bis ich die richtigen Einsatzgebiete und teils seltsamen Verhalten dieser Funktionen erkannt hatte. Wer sich also mit dem Thema auskennt, Fehler findet, weitere Möglichkeiten kennt, immer her damit!