流沙jquery插件放大元素,因为它们缓和.为什么
Quicksand jquery plugin enlarging elements as they ease. Why?
我目前正在尝试使用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。
我认为百分比也包含在同样的情况下。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 为什么“;未定义的“;在JavaScript中结束循环
- 为什么这在IE中的工作方式与在Firefox中不同
- 知道为什么我的旋转木马不会自动更改图片吗
- 为什么会出现错误;未捕获的类型错误:undefined不是函数;
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 为什么在变形之前不缺少Fx
- 为什么我的 ajax 调用没有生成,因为我包含 ajax 的 js 文件包含在 iframe 中
- 流沙jquery插件放大元素,因为它们缓和.为什么
- 我的查询获胜'因为一个剧本,它不能工作(它以错误的方式工作)!?但为什么呢?SESSIONS和PHP
- 为什么仅仅因为我设置了“setInterval”函数,它就显示不同的“clientWidth”值
- 为什么是$scope$这里需要apply()来进行简单的删除,以及'这是推荐的方法(因为有了它,就会抛出一个错误
- 为什么Ractive.js reset()和update()方法重复模板,因为有一个带有array.protype.so
- 为什么$scope和var变量在我的角控制器中未定义,因为成功似乎只是隐藏值
- 因为“一个+ ?“是懒惰的,为什么“a+?”匹配“aaab"
- 无法访问现有节点包的属性,因为它是'未定义'为什么
- 谷歌chrome - javascript大整数round因为精度?(为什么?)
- 为什么是我的简单,纯JavaScript,浅克隆函数不工作,因为我的期望
- 为什么null == 0输出false,因为两者都是假值
- 当参数包含括号时,为什么javascript会因为语法错误而失败