enmi12/glossaire/_posts/tests/2011-05-13-jquery-animation.html
changeset 0 d970ebf37754
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/tests/2011-05-13-jquery-animation.html	Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,92 @@
+---
+title: jquery animation
+layout: default
+category: tests
+---
+
+<style>
+  .isotope,
+  .isotope .isotope-item {
+    -webkit-transition: none;
+       -moz-transition: none;
+        -ms-transition: none;
+         -o-transition: none;
+            transition: none;
+  }
+</style>
+
+<section id="copy">
+  <p>Check that the option setter for animationEngine is properly triggered.</p>
+</section>
+
+<section id="options" class="clearfix">
+
+
+  {% include filter-buttons.html %}
+
+  {% include sort-buttons.html %}
+
+  <h3>Etc</h3>
+
+  <ul id="etc" class="clearfix">
+
+    <li id="toggle-animation"><a href="#toggle-animation">Toggle jQuery animation</a></li>
+    <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
+  </ul>
+</section> <!-- #options -->
+
+<div id="container" class="clickable clearfix">
+  {% for element in site.elements limit:40 %}
+    {% include element-partial.html %}
+  {% endfor %}
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script>
+  $(function(){
+  
+    var $container = $('#container');
+    
+    {% include random-sizes.js %}
+    
+    $container.isotope({
+      itemSelector: '.element',
+      transformsEnabled: false,
+      animationEngine: 'jquery',
+      masonry: {
+        columnWidth : 120
+      },
+      getSortData : {
+        symbol : function( $elem ) {
+          return $elem.attr('data-symbol');
+        },
+        category : function( $elem ) {
+          return $elem.attr('data-category');
+        },
+        number : function( $elem ) {
+          return parseInt( $elem.find('.number').text(), 10 );
+        },
+        weight : function( $elem ) {
+          return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
+        },
+        name : function ( $elem ) {
+          return $elem.find('.name').text();
+        }
+      }
+    });
+    
+    {% include option-set-buttons.js %}
+
+    {% include change-sizes.js %}
+    
+    var isAnimated = true;
+    $('#toggle-animation').click(function(){
+      isAnimated = !isAnimated;
+      var aniEngine = isAnimated ? 'jquery' : 'css';
+      $container.isotope( 'option', { animationEngine: aniEngine } );
+      return false;
+    });
+
+  });
+</script>
\ No newline at end of file