jQuery 学习3

 
这节课主要是学习jQuery的动态效果。
show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown()滑出,slideUp()滑入,animate()动画效果,stop()停止动画
 
w3c教程手册里有很好的解释,但很多同学依旧看不懂,行吧,那这里我们演示代码,看看效果,简单的学学这个东西:
 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery 学习3</title>
<script src="../js/jquery-1.12.2.min.js"></script>
</head>
<body>
<button id="b">点击我切换div</button>
<div>我会被改变</div>
<!--这里我们用class,演示一次jQuery里的class写法-->
<p class="p2">点击我,就会隐藏我</p>
<button id="r">点击我,出现淡入效果</button>
<button id="u">点击我,淡出效果</button>
<!--给这个p元素设置css样式,让它先默认隐藏-->
<p id="ru" style="width: 100px;height: 100px;display: none"></p>
<br/><br/>
<button id="h1">点击我,出现滑入效果</button>
<button id="h2">点击我,滑出效果</button>
<!--给这个p元素设置css样式,让它先默认隐藏-->
<p id="hua" style="width: 100px;height: 100px;display: none"></p>
<br/><br/>
<button id="kai">开始动画</button>
<p id="dong" style="width: 100px;height: 100px;position: relative;"></p>
<br/><br/>
<button id="sh">停止动画</button>
<script>
//我们点击button,运行下面的代码
$("#b").click(function(){
//toggle()方法是用来切换show()和hide()的,如果是隐藏则显示,是显示则隐藏
$("div").toggle();
});
//我们点击class为p2的元素
$(".p2").click(function(){
//hide()方法是可以带参数的,有两个参数
//第一个参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
//第二个参数是隐藏或显示完成后所执行的函数名称
$(this).hide(1000,dd());
//调用dd()函数,然后1000是毫秒,则是1秒时间,隐藏该元素
});
function dd(){
//被上面的函数调用,运行以下的代码
alert('我被调用了');
} //点击id为r的button元素,使id为ru的p元素出现淡入效果
$("#r").click(function(){
//fadeIn()方法则是淡入效果,后面跟了一个参数3000是毫秒,就是3秒以内慢慢出现
$("#ru").fadeIn(3000);
});
//点击id为u的button元素,使id为ru的p元素出现淡出效果
$("#u").click(function(){
//fadeOut()方法则是淡出效果,后面跟了一个参数2000是毫秒,就是2秒以内慢慢出现
$("#ru").fadeOut(2000);
}); //点击id为u的button元素,使id为ru的p元素出现淡出效果
$("#h1").click(function(){
//slideDown()方法则是滑出效果,后面跟了一个参数3000是毫秒,就是3秒以内慢慢出现
$("#hua").slideDown(3000);
});
//点击id为u的button元素,使id为ru的p元素出现淡出效果
$("#h2").click(function(){
//slideUp()方法则是滑入效果,后面跟了一个参数2000是毫秒,就是2秒以内慢慢出现
$("#hua").slideUp(2000);
}); //animate()动画效果,这个就比较难一点
//默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。
//如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$("#kai").click(function(){
$("#dong").animate({
left:'250px',
height:'150px',
width:'150px'
},5000,dd());
//animate()里面有三个参数,第一个是css样式
//第二个和第三个同上面的一样,一个是时间控制,一个是调用函数
}); //stop()停止方法,可以停止以上效果,我们测试一个
$("#sh").click(function(){
$("#dong").stop();
//就这样,就可以停止id为dong的这个元素了
});
</script>
</body>
</html>
 
同学可以对着代码,测试功能。这些方法,都是可带参数的,除了stop()停止方法和animate()动画方法,其他的都可以带两个参数,第一个参数是时间控制,第二个参数是调用函数!animate()动画效果,它有三个参数,第二个是时间控制,第三个是调用函数,第一个则是多出的,css样式控制,改变效果。
这里要注意animate()动画方法,因为静态页面都是没办法移动的,要使用antmate()动画方法,就要给它一个postion定位,这样的话,就可以实现位移,做出动态特效。
stop()停止方法也是有两个参数,这个同学去w3c教程手册里去看看咯!
以上实战项目中,大多数可能遇到的并不多,但是遇到了,就可以做出这种动态效果,好看又好用,要考虑用户体验,总之显示隐藏太低调了,偶尔尝尝新花样!这些就比如可以用到二级菜单导航栏里。
 
希望我的教程能帮助到大家。
 

第二十一篇 jQuery 学习3 特效效果的更多相关文章

  1. 第二十三篇 jQuery 学习5 添加元素

    jQuery 学习5 添加元素   同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再 ...

  2. Python开发【第二十一篇】:Web框架之Django【基础】

    Python开发[第二十一篇]:Web框架之Django[基础]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...

  3. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  4. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  5. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  6. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  7. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  8. Python之路【第二十一篇】:JS基础

    JavaScript的基础学习(一) 一.JavaScript概述 1.1 JavaScript的历史 ● 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在 ...

  9. Python之路【第二十一篇】Django ORM详解

    ORM回顾 关系对象映射(Object Relational Mapping,简称ORM). django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表. 对于ORM框 ...

随机推荐

  1. CSS操作表格的边框和表格的属性示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. centos 7 删除 virbr0 虚拟网卡

    出现虚拟网卡是因为安装时启用了 libvirtd 服务后生成的关闭方法virsh net-list名称               状态     自动开始  持久------------------- ...

  3. Python——GUI编程 控件及常用信号

    QSlider类中的常用信号 valueChanged: 当滑块位置发生改变时触发此信号 sliderPressed: 当用户按下滑块时触发此信号 sliderMoved: 当用户拖动滑块时触发此信号 ...

  4. 05 vue-cli如何运行

    一.index.html index.html跟其他html一样,只有一个空的根节点,提供main.js用来挂载实例,所有内容通过vue来填充. 二.main.js main.js主要是引入vue框架 ...

  5. 让nginx 的ssi支持include相对路径

    好久没接触nginx了,今天帮同事解决一个客户的问题,顺便记录下:version : nginx-1.6.2问题描述:客户的files.shtml里面include一个网站的头部文件( <!–# ...

  6. 微信小程序页面左右滑动事件

    微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要 ...

  7. 关于DOM操作的案例

    1. 模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> < ...

  8. C# WPF Border控件总结

    Border控件不是一个布局面板,而是一个非常便于使用的元素,经常与布局面板一起使用.所以,在继续介绍其他布局面板之前,现在先介绍一下Border控件是有意义的. Border类非常简单.它只能包含一 ...

  9. ORACLE 更新 和 插入多条 数据

    --插入语句INSERT INTO OA_W_BAOXIAOMXYWB (ID,DONGTAITABLEPARENTSN,CHANPINNAMEGKFK,CHANPINJITIGKFK,CHANPIN ...

  10. Windows下的开发辅助神器——Chocolate Package Manager

    Windows下的开发辅助神器——Chocolate Package Manager:https://juejin.im/post/5c6cb3acf265da2dc4537235 Windows上的 ...