--- /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