jquery之效果操作
jQuery操作之效果
效果一共分五大类
一.基本
二.滑动
三.淡入淡出
四.自定义
五.设置
咱们先来看一下基本类
一.基本又分为
show()
hide()
toggle()
html代码
<div></div>
<p>123</p>
<input type="button" id="btn" value="显示">
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="切换">
css代码
div{
width: 100px;
height: 100px;
background: red;
display: none;
}
jquery代码
$("#btn").click(function(){
//显示div 3秒执行完
$("div").show(3000);
})
$("#btn1").click(function(){
//隐藏div 3秒执行完
$("div").hide(3000);
})
$("#btn2").click(function(){
//切换显示隐藏div 2秒执行完
$("div").toggle(2000);
})
效果如下图
二.滑动又分为
show()
hide()
toggle()
html和css代码都一样
jquery代码
$("#btn").click(function(){
//展开div
$("div").slideDown();
})
$("#btn1").click(function(){
//收缩div
$("div").slideUp();
})
$("#btn2").click(function(){
//切换展开收缩div
$("div").slideToggle();
})
效果图
三.淡入淡出又分为
fadeIn()
fadeOut()
fadeTo()
fadeToggle
css代码
div{
width: 200px;
height: 400px;
background: red;
display: none;
position:absolute;
top:0;
left:0;
}
input{
margin-top:420px;
}
jquery代码
$("#btn").click(function(){
//渐渐淡入
$("div").fadeIn(2000);
//两秒以后开始执行动画
$("div").fadeTo("slow",2000);
})
/$("#btn1").click(function(){
//渐渐淡出
$("div").fadeOut(2000);
})
$("#btn2").click(function(){
//切换淡入淡出div
$("div").fadeToggle(2000);
})
效果图
四.自定义(这个效果是最常用的一个效果,各种效果都能实现)
animate()
stop()
delay()
css代码
div{
width: 200px;
height: 400px;
background: red;
position:absolute;
top:0;
left:0;
}
input{
margin-left:700px;
}
jquery代码
$("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
$("#btn1").click(function(){
//终止进行中的动画效果
$("div").stop().animate()
})
$("#btn2").click(function(){
//延时动画效果
$("div").delay(500).animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
效果图
五.设置
$.fx.off()
$.fx.interval()//相当于定时器
jquery代码
//暂停一切动画效果
$.fx.off=true;
$("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
jquery之效果操作的更多相关文章
- 解密jQuery内核 DOM操作的核心buildFragment
文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- jQuery之筛选操作
jQuery之筛选操作 筛选操作分三大类:过滤,查找,串联 eq(),first(),last(),hasClass(),filter(),is() html代码 jQuery代码 效果如下: map ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery的效果(动画)
jquery的效果(动画) show 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数:speed:三种预定速度之一的字符串('slow','normal','fast' ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
随机推荐
- vertical-align用法
父元素下面有两个子元素,第一个子元素设置display:inline-block,第二个子元素设置display:inline-block, vertical-align:top这样两个元素就能顶部对 ...
- 老李分享:HTTP协议之协议头
老李分享:HTTP协议之协议头 当我们打开一个网页时,浏览器要向网站服务器发送一个HTTP请求头,然后网站服务器根据HTTP请求头的内容生成当次请求的内容发送给浏览器.你明白HTTP请求头的具体含 ...
- google官方的下拉刷新+自定义上拉加载更多
转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...
- c++ 字符串去重
##### c++ 字符串去重 == 需求 == * 编写一个字符串过滤函数,若字符串出现多个相同的字符,将不是首次出现的字符过滤掉. > 输入:"apache" 输出:&q ...
- 面试题(一)—Java基础(上)
1.面向对象的三大特征 (1)封装 封装性指的是隐藏了对象的属性和实现细节,对外仅提供公共的访问方式. 好处: 将变化隔离,提供复用性和安全性. (2)继承 提高代码的复 ...
- jmeter读取文件进行参数化时随机取值实现
jmeter能用来做参数化的组件有几个,但是都没有随机取值的功能,遇到随机取值的需求怎么办呢? 突发奇想,可以用函数_StringFromFile来实现,先来介绍下此函数: 此函数位于函数助手中, 函 ...
- 《Algorithms Unlocked》读书笔记1——循环和递归
<Algorithms Unlocked>是 <算法导论>的合著者之一 Thomas H. Cormen 写的一本算法基础. 书中没有涉及编程语言,直接用文字描述算法,我用 J ...
- 自动生成数学题型一 (框架Struts2) 题型如(a+b=c)
1. 加减乘除 1.1 随机生成制定范围的整数 /** * 随机产生一个被限定范围的整数 * * @param num1 * 定义起始范围 num1 * @param num2 * 定义终止范围 nu ...
- xshell配色Solarized Dark
转自:xshell配色Solarized Dark [Solarized_Dark] text(bold)= magenta(bold)=6c71c4 text= white(bold)=fdf6e3 ...
- NuGet 自定义配置
默认配置: 默认配置文件的路径%APPDATA%\NuGet\NuGet.Config (DOS) 或 $ENV:APPDATA\NuGet\NuGet.Config (PowerShell),(例如 ...