jQuery animate() ...每步几个像素

Question

我正在尝试构建一个类似控制台的动画。

我想使用 animate 函数来调整 div 的大小，但不能在平滑的动画中，例如每步 1 像素。我想要每步 10 像素左右。

我在 animate 函数中找不到解决方案或选项，因此我尝试使用 animate 的步骤选项，但它不起作用：

如下所示：

$(this).animate({height: "60"}, {
    duration: 5000,
    step: function(){
       var curheight = $(this).height();
       $(this).css('height', curheight+9+'px');
    }   
});

animate 仍然将其动画化为一步 1 像素并忽略新的高度。

有什么想法吗？我有点被困在这里了。

谢谢。

Answer 1

当您使用默认值制作动画时：$(this).animate({height: "60"})
它变成一个 swing 动画，如下所示： $(this).animate({height: "60"}, 500, "swing")

现在 默认情况下可用的缓动选项有 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< /code> 东西，因为当我尝试它时它甚至不起作用......但无论如何我尝试了这个并且它起作用了。 （只是做与线性相同的操作）

$.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 似乎始终为零百分比，而 diff 始终为 100%（百分百是第一）。

唔。看起来很傻。 0% 加 100% 次完成百分比...哦好吧

好吧，看起来您一次只需制作一定数量的动画。通过上面的示例，您可以轻松地一次为 10 个像素设置动画，只需使用此

$('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 语句中使用大括号，也不在我的 if 语句末尾使用分号命令。

干杯!

Answer 2

也许您可以将jQuery.fx.interval设置为130（13是默认值）。那么每个动画都会类似控制台。

Answer 3

类似的东西： http://nayi.free.fr/error （不使用 jQuery）？

Answer 4

不幸的是，基于一些研究博客 Ben Nadel 做到了，step 属性仅用于报告值而不是修改它。

但是，您可以非常简单地制定自己的方法来为该功能设置动画。您还可以查看 jQuery .animate() 源 并修改它可以满足您的需求，尽管我觉得使用像 setInterval 之类的东西和您自己的逻辑可能更容易。

如果 jQuery 允许您返回一个新的（更改的）值，我会很高兴，并且可能值得在他们的网站上作为功能更新提及。