weird animations

[TheBnl 0]

Hey, I got some problems and i cant figure out whats wrong,i have a menu where you can filter the content displayed on the right.It works but it uses some weird animations and i can't figure out what's wrong.I use Quicksand for the filtering and the jQuery Easing Plugin for the animations. The link:http://bram-de-leeuw.nl/test/portfolio/index.html Thanks in advance!

[TheBnl 0]

this is the script:

$(document).ready(function() {  // get the action filter option item on page load  var $filterType = $('#filterOptions li.active a').attr('class');  // get and assign the ourHolder element to the// $holder varible for use later  var $holder = $('ul.content');  // clone all items within the pre-assigned $holder element  var $data = $holder.clone();  // attempt to call Quicksand when a filter option// item is clicked$('#filterOptions li a').click(function(e) {  // reset the active class on all the buttons  $('#filterOptions li').removeClass('active');   // assign the class of the clicked filter option  // element to our $filterType variable  var $filterType = $(this).attr('class');  $(this).parent().addClass('active');   if ($filterType == 'all') {   // assign all li items to the $filteredData var when   // the 'All' filter option is clicked   var $filteredData = $data.find('li');  }  else {   // find all li elements that have our required $filterType   // values for the data-type element   var $filteredData = $data.find('li[data-type=' + $filterType + ']');  }   // call quicksand and assign transition parameters  $holder.quicksand($filteredData, {   duration: 800,   easing: 'easeInOutQuad'  });  return false;});});

Related HTML:

<ul id="content" class="content seven column push-five">	  <li data-type="ontwerpen" data-id="id-1" class="twelve">		  <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a>		 </li>		    <li data-type="interactief" data-id="id-2" class="twelve">		  <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a>		 </li>			   <!-- ETC.... --></ul>

[TheBnl 0]

I use a responsive lay-out (Foundation: http://foundation.zurb.com/) and i think that is the problem.On Github there are some fixes but non of them seem to work,any ideas on how to solve this problem?

[smiles 7]

Follow Quicksand's homepage http://razorjack.net/quicksand/, I see one difference - Your div that contains <ul id='content' ...> also contains filterOptions, while in Quicksand's homepage, filterOptions place outside that div - That div also has its width nearly two times larger than <ul id='content' ...> (I think object will based on width of object's container to calculate the offset for animation)

[TheBnl 0]

Ahhh Thanks! i needed that other pair of eyes!I fixed it by putting the <ul> in a <div> simple as that! Many thanks!