Question

我正在尝试使用Easing插件，以摆脱我slideDown()效果中可怕的跳跃和口吃：

    $('.message').each(function (index) {
        var t = $(this);
        t.hide();
        t.slideDown(3000, 'easeOutQuad');
    });

效果仍然不稳定，我注意到VS 2010中有以下消息的6个实例：

's' is already defined

来自jquery.easing.1.3.js文件。

我无法想象这条消息所指的是什么会吸引人，但我无法弄清楚其他可能是什么问题。

是否有人使用jasing-1.4.3成功使用Easing插件？还有其他我忽视的东西，或者我不知道的解决方法吗？

更新

我复制了“跳跃”here

一旦每个div引入多行，似乎问题就出现了。

Answer 1

如果查看源代码，警告来自一些重新定义s的缓动方法。例如，看看easeOutElastic：

easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},

请注意，s在第2行中定义，在第4行和第5行重新定义。我无法确定重新定义s的原因，并且在第4行和第5行中删除多余的“var”关键字并不影响宽松方法，据我所知。警告似乎无害。

我创建了一个jsFiddle，并且在FF4b6，IE8或Chrome9中没有看到任何大小的波动。

http://jsfiddle.net/TbwPT/

可能没有那么平滑，但我的视觉印象是，这是由于WRT必须渲染或不渲染全像素的限制。随着缓和速度减慢，您将看到整行像素突然出现。这是浏览器如何定位文本而不是缓动函数的限制。例如您无法定位顶部= 3.5px左= 2.9px。我怀疑如果你想要一个更流畅的动画，你将不得不看一下＆lt; canvas＆gt;上的动画文字。

更新：看看你的jsFiddle（http://jsfiddle.net/hPred/）每个div有多行，看起来动画在确定div的正确最终高度时有问题，因为它没有指定。它正确地从零动画到单行的高度，然后弹出到div的整个高度。如果指定高度，它会从零到最终div高度正确设置动画。以下技巧可用于设置div高度：

$('.message').each(function (index) {
    var t = $(this);
    t.height(t.height());  // Read the computed height and then set it explicitly
    t.hide();
    t.slideDown(3000, 'easeOutQuad');
});

这对我来说是正确的动画...... http://jsfiddle.net/hPred/3/

jQuery Easing插件 - “已经定义了”;在多行文字上发生“跳跃”

1 个答案: