Awkward jump when filtering with jQuery Quicksand

Question

I'm working on a filterable site using quicksand and jquery. I've set everything up (the imgs are generic for now). There's a set of categories above a group of images, and when you select a category, only the projects in that category should show. It does filter and show the right projects but it jumps up and down in a very awkward way when filtering - when it should be easing.

The link is http://lllh.dk/filtering/work3.html

Part of the html:

<div id="content">
    <div class="txtdiv">
    <h1>A selection of work</h1>
    <h2>2009-present</h2>
    </div>

        <div id="workleft">

            <ul class="filterOptions">  
              <txt>
                <li class="active"><a href="#" class="all">All</a></li>
                <li><a href="#" class="graphicdesign">Graphic Design</a></li>
                <li><a href="#" class="printmatters">Design of Printed Matters</a></li>
                <li><a href="#" class="designlanguages">Design for Languages</a></li>
                <li><a href="#" class="typo">Typography and Lettering</a></li>
                <li><a href="#" class="visualidentity">Visual Identity</a></li>
              </txt>
            </ul>
        </div>

        <div id="workright">
            <ul class="filterOptions">  
              <txt>
                <li><a href="#" class="photo">Photography</a></li>
                <li><a href="#" class="camless">Cameraless Photography</a></li>
                <li><a href="#" class="co-socialdesign">Co-Design / Social Design</a></li>
                <li><a href="#" class="conceptualdesign">Conceptual Design</a></li>
                <li><a href="#" class="criticaldesign">Critical Design</a></li>
              </txt>
            </ul>
        </div>

    <div class="workdiv">

    <ul class="ourHolder">

<li class="item" data-id="id-1" data-type="graphicdesign typo">
<a href="work/braille_calendar.html" onMouseOver="document.braille.src='workbuttons/braille2.jpg';" onMouseOut="document.braille.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="braille"> </a>
</li>
<li class="item" data-id="id-3" data-type="camless photo">
<a href="work/braille_calendar.html" onMouseOver="document.RapaNui.src='workbuttons/braille2.jpg';" onMouseOut="document.RapaNui.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="RapaNui"> </a>
</li>

<li class="item" data-id="id-2" data-type="graphicdesign">
<a href="work/braille_calendar.html" onMouseOver="document.Name.src='workbuttons/braille2.jpg';" onMouseOut="document.Name.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="Name"> </a>
</li>
<li class="item" data-id="id-2" data-type="typo">
<a href="work/braille_calendar.html" onMouseOver="document.Something.src='workbuttons/braille2.jpg';" onMouseOut="document.Something.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="Something"> </a>
</li>           
    </ul>
    </div>  
</div>

And some of the css

/* Load headline fonts */
@font-face {
 font-family: 'ACPRegular';
 src: url('acaslonpro-regular-webfont.eot');
 src: url('acaslonpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('acaslonpro-regular-webfont.woff') format('woff'),
     url('acaslonpro-regular-webfont.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'ACPBold';
 src: url('acaslonpro-bold-webfont.eot');
 src: url('acaslonpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('acaslonpro-bold-webfont.woff') format('woff'),
     url('acaslonpro-bold-webfont.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

/* Page content */
#content {
margin-top:75px;
position:absolute;
width:850px;
z-index:0;
border-bottom:45px;
border-bottom-style:solid;
border-bottom-color:#FFF;
}

.txtdiv {
width:400px;
margin: 0px auto 0px auto;
text-align:center;
}

/* Typography */

h1 {
font-family:ACPBold;
letter-spacing:1px;
font-size:2em;
font-weight:normal;
padding:0px;
margin:0px;
margin-bottom:3px;
}

h2 {
font-family:ACPRegular;
font-size:1.2em;
font-weight:normal;
padding:0px;
margin-top:0px;
margin-bottom:15px;
}

txt {
font-family:Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:160%;
margin-left:auto;
margin-right:auto;
}

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: auto;
}

/* Work page */
#workleft {
width:421px;
margin: 0px 8px 0px 0px;
text-align:right;
float:left;
}

#workright {
width:421px;
text-align:left;
overflow:hidden;
}


.workdiv {
width:741px;
margin: 0px auto 0px auto;
margin-top:45px;
}

/*- PORTFOLIO -*/
ul.ourHolder {
width: 800px;
height: 850px;
overflow: hidden;
}
ul.ourHolder li.item {
width: 247px;
height: 164px;
float: left;
text-align: center;
overflow: hidden;
}

And finally the js..

$(document).ready(function() {
  // get the action filter option item on page load
  var $filterType = $('.filterOptions li.active a').attr('class');

  // get and assign the portfolio element to the
// $holder varible for use later
  var $holder = $('ul.ourHolder');

  // 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;
});
});

It seems that somehow part of the layout disrupts the easing. In my attempt to troubleshoot, it seems that something within the part above the images is the problem, maybe the txtdiv div. If I remove all of the css except from that which applies to the filter function, the easing and filtering works fine.

Answer 1

I know this problem. Here is already a question: CSS bubbling while using jQuery Quicksand

For me it works, when I change multiple css lines. But I don't know it anymore, maybe you can look in the source: http://www.annagebhardt.de/ (to see the effect click on 'PROJEKTE' and then a sub entry)

Answer 2

Commenting out $(this).parent().addClass('active'); and adding adjustHeight: false to the the options of quicksand worked for me.