0

我目前正在尝试使用 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;
    });
});

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

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

4

1 回答 1

0

发生这种情况是因为您使用了缓动功能：easeInOutQuad.

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

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

编辑：

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

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

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

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

于 2012-05-07T22:01:57.520 回答