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

Question

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

我想使用该animate函数调整div的大小,但不是像每步1px这样的平滑动画.我希望每步更像10px.

我在animate函数中找不到解决方案或选项,所以我尝试使用animate的step-option,但它不起作用:

像这样的东西:

$(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东西,因为当我尝试它时它甚至都不起作用......但无论如何我试过这个并且它起作用了.(就像线性一样)

$.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%完成百分比......哦

好吧,看起来你必须一次只动画一定数量的动画.您可以使用上面的示例一次轻松地为十个像素设置动画

$('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语句或分号不使用大括号.

干杯!