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 ...
随机推荐
- devcpp中很简单的排序
之前学的东西,不知什么缺了,什么没缺,索性重头开始弄,用的是<啊哈!算法>. 排序很简单,小的可以选择死磕.直接贴一份代码. #include<iostream> #inclu ...
- 【Egret】3d 服务器配置
在服务器MIME里添加这些类型就可以了:
- Android kernel LOGO的更换方法
[从制作logo到LCD显示或者VGA显示logo] 1.制作logo的方法: 首先选择一个自己喜欢的图片,然后通过GIMP软件将该图片保存为.png格式, 变换方式这个就不说了(very easy) ...
- EM最大期望算法-走读
打算抽时间走读一些算法,尽量通俗的记录下面,希望帮助需要的同学. overview: 基本思想: 通过初始化参数P1,P2,推断出隐变量Z的概率分布(E步): 通过隐变量Z的概 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- Azure IoT 技术研究系列2-起步示例之设备注册到Azure IoT Hub
上篇博文中,我们主要介绍了Azure IoT Hub的基本概念.架构.特性: Azure IoT 技术研究系列1-入门篇 本文中,我们继续深入研究,做一个起步示例程序:模拟设备注册到Azure IoT ...
- Named function expressions demystified
Introduction Surprisingly, a topic of named function expressions doesn't seem to be covered well eno ...
- Java Comparator的范型类型推导问题
问题 在项目中,有一处地方需要对日期区间进行排序 我需要以日期区间的开始日为第一优先级,结束日为第二优先级进行排序 代码 我当时写的代码如下: List<Pair<LocalDate, L ...
- STM32实战应用(一)——1602蓝牙时钟1液晶的显示测试
前言 从51到STM32F4学习这么久了,总算找到点头绪了,目前学习了GPIO,中断,定时器,看门狗的基本使用,所以想试着看看能不能做个什么东西,就是想复习一下最近学习的知识.正好上学期单片机课程设计 ...
- Linux基础(6)
Linux基础(六) shell脚本中的三大循环和函数知识点 一.流程控制之if结构 1.简单的if实例: #!/bin/bash var='/etc/init.d' #var='/dev/sda' ...