Question

我目前正在尝试使用Quicksand，这是一个jquery插件，允许您通过隐藏和显示基于标签的某些元素来为页面上的元素设置动画。我的工作做得很好。我的问题是，随着元素的缓和，它们会在它们移动时放大。一旦他们在他们的地方定居，他们缩小到适当的大小，但它看起来非常奇怪，我想知道为什么这首先发生。

这是main.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;
    });
});

Quicksand文件本身保持不变，除了我将文档中的所有高度更改为“宽度”，因为我没有高度为任何div指定。

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

Answer 1

这是因为您使用的缓动功能：easeInOutQuad。

它为动画提供了一个投射反弹方面。

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

修改

您从一开始就找到了问题。我已经对您的页面进行了调整，发现百分比度量是问题所在。

来自网站：http://razorjack.net/quicksand/docs-and-demos.html

CSS推荐
1.在为您的商品及其容器设置样式时，请使用CSS类。使用ID可能会导致奇怪的结果。 Quicksand克隆容器以模拟动画的目标框架。由于存在相同ID的两个元素是不可能的，因此应避免使用容器ID为您的项目/容器设置样式 2.Quicksand需要知道身体，容器和收集物品的边缘。如果这些元素有其边距，请使用px（像素），而不是ems。该插件暂时不了解ems。

我认为百分比包含在同一个案例中。

Quicksand jquery插件随着它们的轻松扩大元素。为什么？

1 个答案: