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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue中改变滚动条样式的方法
Mar 03 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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP.vs.JAVA
2016/04/29 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
万能的php分页类
2017/07/06 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
煤矿施工安全协议书
2016/03/22 职场文书