jQuery动画特效实例教程


Posted in Javascript onAugust 29, 2014

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

1.自制折叠内容块

内容块如下:

<div class="module">
  <div class="caption">
    <span>标题</span>
    <img src="rollup.gif" alt="rollup" title="rolls up this module"/>
  </div>
  <div class="body">
    近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武,恒大的惹不起不过尔尔,恒大失去了对其它球队压倒性的优势,能力下降是恒大霸主地位有所动摇的根源所在。
  </div>
</div>

给img元素绑定点击事件。

$(function() {
  $('div.caption img').click(function () {
 //先找到img的父级元素,再找该父级元素的子元素
 var $body = $(this).closest('div.module').find('div.body');
 if ($body.is(':hidden')) {
   $body.show();
 } else {
   $body.hide();
 }
  });
});

运行效果如下图所示:

jQuery动画特效实例教程

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

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle();
  });
});

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

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow');
  });
});

又比如:

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow', function() {
   $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
 });
  });
});

2.使元素淡入淡出

fadeIn(speed, callback)    
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

3.上下滑动元素

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

4.停止动画

stop(clearQueue, gotoEnd)

5.创建自定义动画

animate(properties, duration, easing, callback)

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

如果写一个扩展函数。

$.fn.fadeToggle = function(speed){
  return this.animate({opacity:'toggle'},'slow');
}

6.自定义缩放动画

$('.classname').each(function(){
  $(this).animate({
    width: $(this).width() * 2,
    height: $(this).height() * 2
  });
});

7.自定义掉落动画

$('.classname').each(function(){
  $(this)
    .css("position","relative")
    .animate({
      opacity: 0,
      top: $(window).height() - $(this).height() - $(this).position().top
    },'slow',function(){ $(this).hide(); })
});

8.自定义消散动画

$('.classname').each(function(){
  var position = $(this).position();
  $(this)
    .css({
      position: 'absolute',
      top: position.top,
      left:position.left
    })
    .animate({
      opacity: 'hide',
      width: $(this).width()*5,
      height: $(this).height()*5
      top: position.top - ($(this).height() * 5 / 2),
      left: position.left - ($(this).width() * 5 /2)
    },'normal');
});

9.队列中的动画

//动画插入队列
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});

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

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

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

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
jQuery实用函数用法总结
Aug 29 #Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 #Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP加密解密函数详解
2015/10/28 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
javascript每日必学之多态
2016/02/23 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
Vue插件之滑动验证码
2019/09/21 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
社团活动策划书范文
2014/01/09 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
建筑结构施工求职信
2014/07/11 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
医院党建工作总结2015
2015/05/26 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Python中的 Set 与 dict
2022/03/13 Python