我正在尝试构建一个类似控制台的动画。
我想使用animate 函数来调整 div 的大小，但不在平滑的动画中，例如每步 1px。我希望每步多 10 像素。
我在animate函数中找不到解决方案或选项，所以我尝试使用animate的step-option，但它不起作用：
类似这样的：
$(this).animate({height: "60"}, {
duration: 5000,
step: function(){
var curheight = $(this).height();
$(this).css('height', curheight+9+'px');
}
});
animate 仍然以 1 像素为单位对其进行动画处理，并忽略新的高度。
有什么想法吗？我有点卡在这里。
谢谢。
【问题讨论】：
标签： jquery jquery-animate
当您使用默认设置制作动画时：$(this).animate({height: "60"})
它变成了这样的swing 动画：$(this).animate({height: "60"}, 500, "swing")
现在默认可用的 easing 选项是 swing 和 linear。听起来您想要一个名为 stepped 的新名称。
查看 jQuery 源代码..这是它如何添加缓动方法开始...
jQuery.fn.extend({
//other stuff
easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}
//other stuff
});
在网上可以看到命令动画
alert($.easing.linear)
现在我真的不知道fn.extend 的东西，因为当我尝试它时它甚至都不起作用......但无论如何我尝试了它并且它起作用了。 （和线性一样）
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * p;
}
$('div').animate({
height: 200
}, 2000, 'test')
在这里试试http://jsfiddle.net/UFq7c/1/
参数好像是
p 完成百分比n 发生的毫秒数firstNum起点diff还有多远线性很容易弄清楚。起点加走多远乘以完成百分比
我们可以很容易地说一次移动百分之十，而不是一次移动百分之十分之一
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * (parseInt(p / .10) * .10); // .10 is 10%, .15 is 15%, etc
}
在这里试试http://jsfiddle.net/UFq7c/2/
现在唯一的挑战是将其转换为像素数。你会认为firstNum 会是零，diff 会是 200.. 但是 nooo.. firstNum 似乎总是 0% 而diff 总是 100%（一百百分比是第一位的）。
嗯。看起来很傻。 0% 加上 100% 次完成百分比...哦，好吧
看来您一次只需要制作一定数量的动画。通过上面的示例，您可以轻松地一次为十个像素设置动画
$('div').animate({height: '+=100'}, 2000, 'test').animate({height: '+=100'}, 2000, 'test')
对 100 像素进行两次动画处理，一次 10%（100 像素的 10% 是一次 10 个像素）。
您可能希望将 10% 更改为 100%，然后像这样一次设置 10 个像素的动画
$.easing.test = function(p, n, firstNum, diff) {
return firstNum + diff * (parseInt(p / 1.00) * 1.00); // 1.00 is 100%, 1.50 is 150%, etc
}
for(var i = 0; i < 20; i++) {// Do this code 20 times
$('div').animate({height: '+=10'}, 250, 'test')
}
这取决于您的代码是如何工作的。 100% 的规则看起来很愚蠢，但确实有效。
如果您使用 100% 规则，那么您可能希望像这样使其更短，从而获得相同的结果
$.easing.test = function(p, n, firstNum, diff) {
if(p == 1)
return firstNum + diff
else
return firstNum
}
现在我将等待我的答案被否决，因为我不在 if 语句中使用大括号或在命令末尾使用分号。
干杯！
【讨论】：
$.fn.<myfunc> 是访问 jquery 原型的简写：jQuery.prototype.<myfunc>（我相信）。
也许您可以将 jQuery.fx.interval 设置为 130（默认为 13）。那么，每个动画都会类似于控制台。
【讨论】：
类似的东西：http://nayi.free.fr/error（不使用 jQuery）？
【讨论】：
不幸的是，根据一些研究博客Ben Nadel 所做的，step 属性仅用于返回值而不是修改它。
但是，您可以创建自己的方法来非常简单地为该功能设置动画。您还可以查看 jQuery .animate() source 并对其进行修改以满足您的需求，尽管我觉得使用类似 setInterval 的东西并且您自己的逻辑可能更容易。
如果 jQuery 允许您返回一个新的（更改的）值，我会很好，并且可能值得在他们的网站上提及作为功能更新。
【讨论】：