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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
授权委托书样本
2014/04/03 职场文书
2014年人事部工作总结
2014/12/03 职场文书
化验员岗位职责
2015/02/14 职场文书
原告代理词范文
2015/05/25 职场文书
行政处罚听证告知书
2015/07/01 职场文书
小学体育组工作总结
2015/08/13 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript