Animating today's count CSS class

karmi · Jan 4, 2011 · dbb3e98 · dbb3e98
1 parent 233d5cd
commit dbb3e98
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@ <h1>smokes</h1>
 
       <section id="average">
         <p class="label">AVERAGE</p>
-        <p class="value">0</p>
+        <p class="value"></p>
       </section>
     </header>
 

diff --git a/js/app.js b/js/app.js
@@ -17,21 +17,22 @@
       context.render('templates/stats.ejs', { stats: data }).replace('#stats');
       // Update today class and count (animated)
       var today = $('#today .value');
-      today.addClass(function() {
-        var value     = parseInt(data.today);
-        var classname = '';
-        if (value > 0) { $(this).removeClass('zero'); };
-        if (value < 6) { classname = 'lo';   };
-        if (value > 6) { classname = 'mid';  };
-        if (value > 8) { classname = 'hi';   };
-        return classname;
-      });
+      var count = parseInt(data.today);
+      if (count > 0) { today.removeClass('zero'); };
       (function() {
         var original_value = parseInt(today.text()) || 0;
         var current_value  = data.today || 0;
-        var update_value = function(value) { today.text(value); };
+        var update_value = function(value) { return today.text(value); };
+        var update_class = function(value) {
+          var classname = '';
+          if (value < 6) { classname = 'lo';   };
+          if (value > 6) { classname = 'mid';  };
+          if (value > 8) { classname = 'hi';   };
+          today.addClass(classname);
+        };
         for (var i=0; i < current_value; i++) {
-          setTimeout(update_value, i*100, i);
+          setTimeout(update_value, i*75, i);
+          setTimeout(update_class, i*75, i);
         };
       })();
       // Update average count