jquery动画函数如何在内部工作？

Question

这里是小代码

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />

$('#clickme').click(function() {
$('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
}, 5000, function() {
    // Animation complete.
   });
});

从代码中可以清楚地看出，增加和不透明度将是.25。如何jquery设法这样做... jquery内部执行一个循环来增加左边并改变不透明度，直到它变成.25。需要指导。感谢

Answer 1

使用计时器在设定的时间段逐渐增加（或减少）值。它不能使用循环，因为如果是这样的话，它会在执行此操作时阻止/冻结主js线程，您将看不到动画。 js中的所有内容都是（或应该是）异步的，通过事件。

Answer 2

要了解动画代码的外观和工作方式，请查看源代码：

https://github.com/jquery/jquery/blob/master/src/effects.js