jQuery动画特效实例教程

前端之家收集整理的这篇文章主要介绍了jQuery动画特效实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文以实例形式详细讲述了jQuery动画特效的实现方法分享给大家供大家参考之用。具体方法如下:

1.自制折叠内容

内容块如下:

给img元素绑定点击事件。

运行效果如下图所示:

切换元素的显示状态,还可以用toggle方法

以上是没有动画效果的,有时候感觉会很唐突。实际上,show,hide,toggle方法都可以有动画效果。比如:

又比如:

2.使元素淡入淡出

3.上下滑动元素

4.停止动画

5.创建自定义动画

$('.classname').animate({opacity:'toggle'},'slow')

如果写一个扩展函数

6.自定义缩放动画

7.自定义掉落动画

8.自定义消散动画

9.队列中的动画

$('button').click(function(){
$('img').dequeue('chain'); //删除队列中的动画
})

cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration,name)//为队列中所有未执行的动画添加延迟

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

猜你在找的jQuery相关文章