javascript - 另一个 jQuery Quicksand 跳跃式过渡

Question

当我点击过滤器时，li 在过渡到过滤器之前得到一个左侧重叠位置。我测试了以前的问题和答案，但没有解决问题。 ul 不使用绝对位置，li 类保留 float 。

这是html

    <div class="filters">

        <ul id="filters" class="clearfix">
            <li><a title="all" href="#" class="active"> all </a></li>
            <li><a title="web" href="#"> web </a></li>
            <li><a title="app" href="#"> app </a></li>
            <li><a title="logo" href="#"> logo </a></li>
            <li><a title="card" href="#"> card </a></li>
            <li><a title="icon" href="#"> icon </a></li>
        </ul>

    </div>

    <div id="portfolio">

        <ul id="portfolio_list">

            <li class="portfolio" data-id="id-1" data-type="logo">
                <div class="portfolio-wrapper">             
                    <img src="images/portfolios/logo/5.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Bird Document</a>
                            <span class="text-category">Logo</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </li>               

            <li class="portfolio" data-id="id-2" data-type="app">
                <div class="portfolio-wrapper">         
                    <img src="images/portfolios/app/1.jpg" alt="" />
                    <div class="label">
                        <div class="label-text">
                            <a class="text-title">Visual Infography</a>
                            <span class="text-category">APP</span>
                        </div>
                        <div class="label-bg"></div>
                    </div>
                </div>
            </li>
         </ul></div>

这是 jQuery 调用

$(document).ready(function () {

    var $filter = $('#filters a');
    var $portfolio = $('#portfolio_list');
    var $data = $portfolio.clone();

    $filter.click(function(e) {

        if ($($(this)).attr("title") == 'all') {
            var $filteredData = $data.find('li');
        } else {
            var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
        }

        $portfolio.quicksand($filteredData, {
            adjustHeight: 'dynamic',
            duration: 800,
            easing: 'easeInOutQuad'
        });

        $('#filters a').removeClass('active');
        $(this).addClass('active');

    });

}); 

忘记发布CSS

#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
    #portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important;    cursor:pointer; }
    #portfolio_list .portfolio img { max-width:100%; position: relative; }
    #portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
        #portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
        #portfolio_list .portfolio .label-text { color:#000; position: relative;    z-index:500; padding:12px 8px 0; }
            #portfolio_list .portfolio .text-category { display:block; }

感谢任何帮助。谢谢。

Answer 1

问题是由于使用相同的 ID 来设置 ul 和 li 的样式并同时使用 jQuery 调用它。需要使用不带 css 样式的 ID，以免在流沙中产生故障。