Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

90 lines
2.1 KiB

---
title: jquery animation
layout: default
category: tests
---
<style>
.isotope,
.isotope .isotope-item {
-webkit-transition: none;
-moz-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>