使用 jQuery 流沙过滤时出现尴尬的跳转

Question

我正在使用流沙和jquery在可过滤的网站上工作。我已经设置了所有内容（imgs 现在是通用的）。一组图像上方有一组类别，当您选择一个类别时，只有该类别中的项目应该显示。它确实过滤并显示正确的项目，但在过滤时它会以非常尴尬的方式上下跳跃 - 当它应该缓和时。

链接 http://lllh.dk/filtering/work3.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>

和一些 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;
}

最后是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;
});
});

似乎布局的一部分以某种方式破坏了宽松。在我尝试进行故障排除时，似乎图像上方部分中的某些内容是问题所在，可能是 txtdivdiv。如果我删除除适用于过滤器函数的 css 之外的所有 css，则缓动和过滤工作正常。

Answer 1

我知道这个问题。这里已经是一个问题：使用 jQuery 流沙时的 CSS 冒泡

对我来说，当我更改多个 css 行时，它可以工作。但是我已经不知道了，也许您可以查看源代码：http://www.annagebhardt.de/（要查看效果，请单击" PROJEKTE"，然后单击子条目）

Answer 2

注释

掉$(this).parent().addClass('active');并在流沙选项中添加adjustHeight: false对我有用。