1 ---

     2 title: jquery animation

     3 layout: default

     4 category: tests

     5 ---

     6 

     7 <style>

     8   .isotope,

     9   .isotope .isotope-item {

    10     -webkit-transition: none;

    11        -moz-transition: none;

    12         -ms-transition: none;

    13          -o-transition: none;

    14             transition: none;

    15   }

    16 </style>

    17 

    18 <section id="copy">

    19   <p>Check that the option setter for animationEngine is properly triggered.</p>

    20 </section>

    21 

    22 <section id="options" class="clearfix">

    23 

    24 

    25   {% include filter-buttons.html %}

    26 

    27   {% include sort-buttons.html %}

    28 

    29   <h3>Etc</h3>

    30 

    31   <ul id="etc" class="clearfix">

    32 

    33     <li id="toggle-animation"><a href="#toggle-animation">Toggle jQuery animation</a></li>

    34     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    35   </ul>

    36 </section> <!-- #options -->

    37 

    38 <div id="container" class="clickable clearfix">

    39   {% for element in site.elements limit:40 %}

    40     {% include element-partial.html %}

    41   {% endfor %}

    42 </div> <!-- #container -->

    43 

    44 <script src="../{{ site.jquery_js }}"></script>

    45 <script src="../{{ site.isotope_js }}"></script>

    46 <script>

    47   $(function(){

    48   

    49     var $container = $('#container');

    50     

    51     {% include random-sizes.js %}

    52     

    53     $container.isotope({

    54       itemSelector: '.element',

    55       transformsEnabled: false,

    56       animationEngine: 'jquery',

    57       masonry: {

    58         columnWidth : 120

    59       },

    60       getSortData : {

    61         symbol : function( $elem ) {

    62           return $elem.attr('data-symbol');

    63         },

    64         category : function( $elem ) {

    65           return $elem.attr('data-category');

    66         },

    67         number : function( $elem ) {

    68           return parseInt( $elem.find('.number').text(), 10 );

    69         },

    70         weight : function( $elem ) {

    71           return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

    72         },

    73         name : function ( $elem ) {

    74           return $elem.find('.name').text();

    75         }

    76       }

    77     });

    78     

    79     {% include option-set-buttons.js %}

    80 

    81     {% include change-sizes.js %}

    82     

    83     var isAnimated = true;

    84     $('#toggle-animation').click(function(){

    85       isAnimated = !isAnimated;

    86       var aniEngine = isAnimated ? 'jquery' : 'css';

    87       $container.isotope( 'option', { animationEngine: aniEngine } );

    88       return false;

    89     });

    90 

    91   });

    92 </script>