流沙jquery插件放大元素,因为它们缓和.为什么

Quicksand jquery plugin enlarging elements as they ease. Why?

本文关键字:为什么 因为 jquery 插件 放大 元素 流沙      更新时间:2023-09-26

我目前正在尝试使用Quicksand,这是一个jquery插件,允许您通过隐藏和显示基于标签的某些元素来对页面上的元素进行动画处理。我的工作很好。我的问题是,当元素缓和时,它们在移动时会放大。一旦它们在自己的位置上安顿下来,它们就会缩小到适当的大小,但这看起来非常奇怪,我想弄清楚为什么

会发生这种情况。

这是主要的.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 ourHolder 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;
    });
});

流沙文件本身保持不变,除了我将文档中的所有"高度"更改为"宽度",因为我没有为任何div 指定高度。

感谢您的帮助!如果您需要查看HTML或CSS来解决问题,请告诉我。

发生这种情况是因为您使用了缓动函数:easeInOutQuad .

它使动画具有反弹方面。

请参阅此处以供参考:http://gsgd.co.uk/sandbox/jquery/easing/

编辑:

从开始,您就发现了问题。我已经调试了您的页面,发现百分比度量是问题所在。

从网站: http://razorjack.net/quicksand/docs-and-demos.html

CSS 建议
1.在设置项目及其容器的样式时,请使用CSS类。使用 ID 可能会导致奇怪的结果。流沙克隆容器以模拟动画的目标帧。由于同一 ID 的两个元素不可能存在,因此应避免通过容器 ID 设置项目/容器的样式。
2.流沙需要知道身体、容器和收集物品的边距。如果这些元素有边距,请使用 px(像素(,而不是 ems。该插件暂时不理解 ems。

我认为百分比也包含在同样的情况下。

相关文章: