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 相关文章推荐
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
django批量导入xml数据
2016/10/16 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
学生自我鉴定
2013/12/18 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Java常用函数式接口总结
2021/06/29 Java/Android
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL