www

commit a2cb9dd345300d5fdd73ffffe9c54001606434c5
parent 2b9af4deea3c28fe61aaed9165ff6cb36d9f3e59
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Thu,  7 Apr 2011 14:48:11 +0200

Animation pour l'apparition du mot central, nettoyage des animations terminé.

Diffstat:
M
code/html5/my-extensions.js
 | 
10
+++++-----
M
code/html5/pticlic.js
 | 
45
+++++++++++++++++++++++++--------------------

2 files changed, 30 insertions(+), 25 deletions(-)
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -66,17 +66,17 @@ $.fn.wh = function(w, h) {
 	return this.width(w).height(h);
 }
 
-$.fn.relativePos = function(xAnchor, yAnchor, to) {
+$.fn.relativePos = function(xAnchor, yAnchor, to, justCss) {
 	var deltaX = this.outerWidth()  * xAnchor;
 	var deltaY = this.outerHeight() * yAnchor;
 
 	if (to) {
 		this.css("position", "absolute");
-		this.offset({
+		var css = {
 			left: to.left - deltaX,
 			top:  to.top  - deltaY
-		});
-		return this;
+		};
+		return (justCss ? css : this.offset(css));
 	} else {
 		var pos = this.offset();
 		pos.left += deltaX;
@@ -98,5 +98,5 @@ $.each({
 }, function(i,e) {
 	var x = e.x;
 	var y = e.y;
-	$.fn[i] = function(to) { return this.relativePos(x, y, to); };
+	$.fn[i] = function(to, justCss) { return this.relativePos(x, y, to, justCss); };
 });
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -54,25 +54,6 @@ function jss() {
 		.south($("#screen").south());
 }
 
-function animateNext(e, button) {
-	console.log(e, e.clientX, e.clientY);
-	$(button).clearQueue().qAddClass("hot").delay(100).qRemoveClass("hot");
-	var el = $("#mn-caption")
-		.clone()
-		.removeClass("mn")
-		.appendTo("#screen")
-		.clearQueue();
-	var oldOff = el.offset();
-	el.offset({left:e.pageX, top:e.pageY});
-	var pos = el.position();
-	el.offset(oldOff);
-	pos.fontSize = 0;
-	el.animate(pos,500).queue(function() {
-		el.remove();
-	});
-}
-
-
 $(function () {
 	var url = "tmp.json";
 	$.getJSON(url, function(data) {
@@ -91,6 +72,31 @@ $(function () {
 			jss();
 		}
 		
+		function animateNext(e, button) {
+			var duration = 700;
+			
+			var mn = $("#mn-caption");
+			
+			$(button).addClass("hot").removeClass("hot", duration);
+			
+			(mn)
+				.clone()
+				.removeClass("mn") // Pour que le texte animé ne soit pas modifié.
+				.appendTo("body") // Append to body so we can animate the offset (instead of top/left).
+				.offset(mn.offset())
+				.clearQueue()
+				.animate({left:e.pageX, top:e.pageY, fontSize: 0}, duration)
+				.queue(function() { $(this).remove(); });
+
+			refresh();
+			var fs = mn.css("fontSize");
+			var mncbCenter = $("#mn-caption-block").center();
+			
+			(mn)
+				.css("fontSize", 0)
+				.animate({fontSize: fs}, {duration:duration, step:function(){mn.center(mncbCenter);}});
+		}
+		
 		$.each(game.cat, function(i, cat) {
 			$('#templates .relation')
 				.clone()
@@ -103,7 +109,6 @@ $(function () {
 				.click(function(e) {
 					answers[currentWordNb++] = cat.id;
 					animateNext(e, this);
-					refresh();
 				})
 				.appendTo(".relations");
 		});