jQuery动画特效实例教程
本文以实例形式详细讲述了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复式基础上再升级,终点: </ 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();
}
});
});
$(
function
() {
$(
'div.caption img'
).click(
function
() {
$(
this
).closest(
'div.module'
).find(
'div.body'
).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'
))
});
});
});
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
stop(clearQueue, gotoEnd)
animate(properties, duration, easing, callback)
$(
'.classname'
).animate({opacity:
'toggle'
},
'slow'
)
$.fn.fadeToggle =
function
(speed){
return
this
.animate({opacity:
'toggle'
},
'slow'
);
}
$(
'.classname'
).each(
function
(){
$(
this
).animate({
width: $(
this
).width() * 2,
height: $(
this
).height() * 2
});
});
$(
'.classname'
).each(
function
(){
$(
this
)
.css(
"position"
,
"relative"
)
.animate({
opacity: 0,
top: $(window).height() - $(
this
).height() - $(
this
).position().top
},
'slow'
,
function
(){ $(
this
).hide(); })
});
$(
'.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'
);
});
//动画插入队列
$(
'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动画特效实例教程的更多相关文章
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
- CSS3入门--线条动画特效实例
HTML: <div></div> CSS: div{ width: 200px; height: 200px; margin: 200px auto; background: ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery动画效果实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 40个超酷的jQuery动画效果教程
自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
随机推荐
- SQL Server 数据库子查询基本语法
一.SQL子查询语句 1.单行子查询 select ename,deptno,sal from emp where deptno=(select deptno ...
- AngularJs入门之表单开发
本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...
- js高程读书笔记(第4章--变量、作用域和内存)
JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何总数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 1. ...
- 改写yii2的listview功能
在vendor\yiisoft\yii2\widgets路径下新增文件ListViewtest,将下列代码粘贴并保存 <?php namespace yii\widgets; use Yii;u ...
- Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法
问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...
- JS代码实现的聊天框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- WebApi Controller 分类
前言 写这篇WebApi Controller分类一是把Contrller分类的解决方法说一说,再顺便把遇到的问题和解决方法聊一聊. 说实话第一次在项目中使用WebApi感觉非常的不顺手. 遇到的问题 ...
- MVC的基类
设计一个验证用户身份是否登陆的基类BaseController /// <summary> /// 所有需要进行登录控制的控制器基类 /// </summary> public ...
- chrome浏览器的跨域设置——包括版本49前后两种设置
做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...
- 《C#并发编程经典实例》笔记
1.前言 2.开宗明义 3.开发原则和要点 (1)并发编程概述 (2)异步编程基础 (3)并行开发的基础 (4)测试技巧 (5)集合 (6)函数式OOP (7)同步 1.前言 最近趁着项目的一段平稳期 ...