另一个 jQuery Quicksand 跳跃过渡

Posted 2023-05-08

【中文标题】另一个 jQuery Quicksand 跳跃过渡

【英文标题】：Another jQuery Quicksand jumpy transition

【发布时间】：2014-05-07 15:52:42

【问题描述】：

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

这里是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"  />
                    <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"  />
                    <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 溢出：隐藏；向左飘浮; #portfolio_list .portfolio 宽度：19%;保证金：2% 1% 0% 1%；边框：1px 实心#c8c8a9；背景：#fff;填充：20px； #portfolio_list .portfolio-wrapper 溢出：隐藏；位置：相对！重要；光标：指针； #portfolio_list .portfolio img 最大宽度：100%;位置：相对； #portfolio_list .portfolio .label 位置：绝对；宽度：100%；高度：50 像素；底部：-50px； #portfolio_list .portfolio .label-bg 背景：#fff;宽度：100%；高度：100%；位置：绝对；顶部：0；左：0； #portfolio_list .portfolio .label-text 颜色：#000;位置：相对； z指数：500；填充：12px 8px 0； #portfolio_list .portfolio .text-category display:block;

感谢任何帮助。谢谢。

【问题讨论】：

你能放个小提琴给我们看看吗？

【参考方案1】：

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