Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Quicksand jquery插件在元素轻松时将其放大。为什么?_Javascript_Jquery_Quicksand - Fatal编程技术网

Javascript Quicksand jquery插件在元素轻松时将其放大。为什么?

Javascript Quicksand jquery插件在元素轻松时将其放大。为什么?,javascript,jquery,quicksand,Javascript,Jquery,Quicksand,我目前正在尝试使用Quicksand,这是一个jquery插件,它允许您通过隐藏和显示基于标记的某些元素来为页面上的元素设置动画。我的工作很好。我的问题是,随着元素的减少,它们在移动时会扩大。一旦他们定居下来,他们会缩小到合适的尺寸,但这看起来非常奇怪,我想弄清楚为什么会发生这种情况 下面是一个main.js文件,其中包含我对quicksand的首选项: $(document).ready(function() { // get the action filter option item

我目前正在尝试使用Quicksand,这是一个jquery插件,它允许您通过隐藏和显示基于标记的某些元素来为页面上的元素设置动画。我的工作很好。我的问题是,随着元素的减少,它们在移动时会扩大。一旦他们定居下来,他们会缩小到合适的尺寸,但这看起来非常奇怪,我想弄清楚为什么会发生这种情况

下面是一个main.js文件,其中包含我对quicksand的首选项:

$(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

它为动画提供了反转反弹特性

请参见此处以供参考:

编辑:

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

从网站:

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


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

尝试改变EaseOutQuad这样的易用类型。不幸的是,EaseOutQuad仍然具有相同的奇怪行为。我一直在慢慢地研究不同的易用功能,它们都在产生这种行为。可能是因为我的宽度不是静态的,而是百分比吗/