jquery - 为什么jquery的animate函数的动画时长不一致？

Question

请看一下这些简单的 jquery 动画：

animate.mouseenter(function () {
    animate.stop().animate({ opacity: 0 }, duration);
});

animate.mouseleave(function () {
    animate.stop().animate({ opacity: 100 }, duration * 10);
});

我的问题：

• 为什么这两个动画的动画时间或多或少相等，尽管动画duration乘以 10 mouseleave？
• 这种行为是否有特殊原因？
• 因子是 10 还是其他接近 10 的浮点值？

这是一个工作小提琴：http: //jsfiddle.net/TCMjd/3/

我还添加了一个fadeInandfadeOut函数的示例，其中相同的duration参数会产生应有的动画时间。

Answer 1

因为不透明度1是完全不透明的。你的动画一直到 100，所以它很快就达到了 1。

http://jsfiddle.net/e8N4Q/

var animate = $(".animate"),
fade = $(".fade"),

duration = 500;

animate.mouseenter(function () {
    animate.stop().animate({ opacity: 0 }, duration);
});

animate.mouseleave(function () {
    animate.stop().animate({ opacity: 1 }, duration * 10);
});

fade.mouseenter(function () {
    fade.stop().fadeOut(duration);
});

fade.mouseleave(function () {
    fade.fadeIn(duration * 10);
});