使用jQuery+Easeing实现Flash风格加载动画

"使用jQuery和Easeing插件实现的仿Flash加载动画教程" 本文将探讨如何使用jQuery和Easeing插件来创建一个类似Flash的加载动画效果。这种效果常见于网站的首页，为用户提供视觉反馈，展示页面正在加载或数据正在准备的过程。在Flash逐渐淡出舞台后，使用JavaScript和CSS实现的动画成为了更现代、更灵活的选择。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在示例中，开发者通过jQuery选择元素并应用动画效果。例如，`$(‘.left’).find(‘ul’)` 选择了左侧容器内的无序列表，`delay(90)` 设置了一个延迟，`animate` 方法则执行动画，将元素的`left`属性改变，并指定动画时长和缓动函数。 缓动函数(easing)是动画的关键部分，它决定了元素移动的速度变化。在jQuery中，通常需要额外的插件如Easeing来提供更多的缓动选项。在示例中，`'easeOutSine'` 是一个缓动函数，它使元素以线性减速的方式结束动画，产生平滑的过渡效果。 动画的顺序很重要。在左侧载入动画完成后，通过回调函数触发右侧的动画。在jQuery中，`animate` 的最后一个参数可以是一个回调函数，当动画完成时执行。例如： ```javascript $(‘.left’).find(‘ul’).animate({left:0},700,’easeOutSine’,function(){ rightImg(); }); ``` `rightImg` 函数负责右侧的动画逻辑，包括图片的淡入淡出和位置变化。这里使用了递归回调函数`myNext`，确保每个图片按照顺序执行动画，直到最后一个图片完成运动。 在`rightImg`函数中，`.fadeIn(90)` 使得图片渐显，`.animate` 则调整图片的`top`属性和透明度，同样使用了缓动函数`easeOutSine`。当检测到最后一个图片(`#lastImg`)的动画状态和`top`属性，会触发标题的动画。 最后，`.title`元素的动画通过`animate`方法实现，将`left`属性变为0，再次使用了缓动效果。同时，添加了右侧列表项的悬停效果，通过`.hover`方法控制子元素`.liSlideDown`的显示和隐藏。 总结来说，这个教程展示了如何利用jQuery和Easeing插件，结合延迟、动画和回调函数，来创建一个仿Flash的加载动画。虽然实现可能不如Flash那样流畅，但对于初学者来说，理解这种实现方式有助于提升JavaScript和动画的理解，也为创建更复杂的交互式网页打下基础。