本文以实例形式详细讲述了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">
    春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点: 春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点: 春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点: 春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点: 春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点: 春江彼岸两大明星产品之一:超越型复式,在春江郦城97复式基础上再升级,终点.
  </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();
 }
  });
});
 
切换元素的显示状态,还可以用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动画特效实例教程的更多相关文章

  1. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  3. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  4. CSS3入门--线条动画特效实例

    HTML: <div></div> CSS: div{ width: 200px; height: 200px; margin: 200px auto; background: ...

  5. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  6. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  7. jQuery动画效果实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 40个超酷的jQuery动画效果教程

    自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...

  9. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

随机推荐

  1. SQL Server 数据库子查询基本语法

    一.SQL子查询语句 1.单行子查询        select ename,deptno,sal        from emp        where deptno=(select deptno ...

  2. AngularJs入门之表单开发

    本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...

  3. js高程读书笔记(第4章--变量、作用域和内存)

    JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何总数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 1. ...

  4. 改写yii2的listview功能

    在vendor\yiisoft\yii2\widgets路径下新增文件ListViewtest,将下列代码粘贴并保存 <?php namespace yii\widgets; use Yii;u ...

  5. Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法

    问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...

  6. JS代码实现的聊天框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. WebApi Controller 分类

    前言 写这篇WebApi Controller分类一是把Contrller分类的解决方法说一说,再顺便把遇到的问题和解决方法聊一聊. 说实话第一次在项目中使用WebApi感觉非常的不顺手. 遇到的问题 ...

  8. MVC的基类

    设计一个验证用户身份是否登陆的基类BaseController /// <summary> /// 所有需要进行登录控制的控制器基类 /// </summary> public ...

  9. chrome浏览器的跨域设置——包括版本49前后两种设置

    做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...

  10. 《C#并发编程经典实例》笔记

    1.前言 2.开宗明义 3.开发原则和要点 (1)并发编程概述 (2)异步编程基础 (3)并行开发的基础 (4)测试技巧 (5)集合 (6)函数式OOP (7)同步 1.前言 最近趁着项目的一段平稳期 ...