HTML内容如何在动画中动态变化？

Question

请查看以下页面：http://livedemo00.template-help.com/wt_39361/index.html#!/page_about。有一个动画，我无法分辨它是如何创建的。页面的移动部分由li代表，代码如下：

<ul>
 <li id="page_about" style="display: block; left: 0px;">
 <li id="page_services" style="display: none; left: -1260.5px;">
 <li id="page_portfolio" style="display: none; left: -1260.5px;">
 <li id="page_contacts" style="display: none; left: -1260.5px;">
 <li id="page_privacy" style="display: none; left: -1260.5px;">
 <li id="page_more" style="display: none; left: -1260.5px;">
</ul>

对我来说最奇怪的是上面的数字，每次点击页面的顶部链接时，HTML（!!）内的显示值都会动态变化。怎么样？对不起，我不知道。我很欣赏如何实现这样的动画。是否有任何Jquery或脚本负责？ 非常感谢你

Answer 1

动画由html中包含的一些JS源代码执行。该动作由jQuery缓动脚本执行。例如，要返回上一部分，您的代码会显示：

.animate({left:-getOutsideLeft()}, 350,'easeInSine', function(){
                     $(this).css({display:'none'});

您可以了解jQuery here提供的所有缓动函数。

HTML中的数字动态变化并不奇怪。 Javascript和它的缓动函数控制着这些数字。