【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件
$("p").hide(); //隐藏事件
$("p").hide(1000); //1秒内缓慢隐藏
$("p").show(); //显示事件
$("p").toggle(); //在隐藏和显示中切换
隐藏后显示提示callback
$("p").hide(function(){
alert("提示消息已经隐藏");
});
$("p").hide(1000,function(){
alert("1s内缓慢隐藏并提示消失已经隐藏");
});
2.淡入淡出
$("#div1").fadeIn(); //淡入
$("#div2").fadeIn("slow"); //缓慢淡入
$("#div3").fadeIn(3000); //延迟3秒淡入
$("#div").fadeOut() //淡出
$("#div").fadeToggle() //淡入淡出
$("#div3").fadeTo("slow",0.7); //设置淡化程度 0完全消失,1不淡化
3.滑入滑出
$(".panel").slideDown(); //向下滑动显示class=panel的div
$(".panel").slideUp("slow"); //向上收起class=panel的div
$(".panel").slideToggle("slow"); //点击显示,再点击收起
例子如下:
<head>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow"); //点击向下滑动显示div,再次点击收起
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none; /*设置隐藏的div*/
}
</style>
</head>
<body>
<div class="panel">
<p>显示隐藏的div</p>
<p>请大家关注我的博客</p>
</div>
<p class="flip">点击显示,再次点击隐藏</p>
</body>
4.动画animate
首先,说明一下为什么要调用animate,而不是直接修改css属性:用animate可以缓慢的修改div的样式,动画效果更加美观,而直接修改css则是加载闪烁直接完成,效果不佳。
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
例子:
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5', //淡化
height:'150px',
width:'150px'
//height:'+=150px', //可使用相对值
//width:'+=150px'
//height:'toggle', //使用预定值,从消失到显示
//width:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
分步动画
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div"); //定义变量div到指定位置
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
5.停止动画
$("div").stop(); //按钮会停止当前活动的动画,但允许已排队的动画向前执行。
$("div").stop(true); //按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。
$("div").stop(true,true); //会立即完成当前活动的动画,然后停下来。
【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】的更多相关文章
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
- jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
- 前端(jQuery)(4)-- jQuery隐藏显示与淡入淡出、滑动、回调
1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 今天依然是 JQ点击事件之“点击淡入淡出事件”
废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...
- jQuery动画之停止动画
语法格式: $(selector).stop(true, false); 第一个参数: + ture: 后续动画不执行 false:后续动画会执行 第二个参数: true: 立即执行完成当前动画 fa ...
- jQuery 开始动画,停止动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- easyUI,重新渲染
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 可以使用$.parser.parse();这个方法进行处理: 例如: $.parser.parse(); 表示对整个页面重新 ...
- 不通过百川打开淘宝app
private void openTaobao(String url){ if (isAppInstalled(this, "com.taobao.taobao")) { //这行 ...
- Luogu P4248 [AHOI2013]差异
题目链接 \(Click\) \(Here\) 神仙题.或者可能我太菜了没见过后缀数组的骚操作,然后就被秀了一脸\(hhhhh\) \[\sum\limits_{1<=i < j < ...
- 使用WinPcap(SharpPcap)实现ARP抓包以实现设备IP修改功能
参考上一篇: 使用WinPcap(SharpPcap)实现ARP抓包以实现设备IP搜索功能 搜索出设备后,需要修改设备IP网关掩码等信息 继续采用ARP包 getBas类似之前的,根据用户电脑的网卡物 ...
- bzoj2004 矩阵快速幂优化状压dp
https://www.lydsy.com/JudgeOnline/problem.php?id=2004 以前只会状压dp和矩阵快速幂dp,没想到一道题还能组合起来一起用,算法竞赛真是奥妙重重 小Z ...
- script nGrinder_TestRunnerInsertMysqlSingle.groovy
s 阿里巴巴Java开发规范手册.zip http://dl.iteye.com/topics/download/ffc4ddcf-8b65-3b3c-b146-96468e2baf40 /** 关于 ...
- ES DSL 基础查询语法学习笔记
1.查询数量 1 2 3 4 5 6 7 curl -XGET 'http://192.168.6.97:9200/_count?pretty' -d ' { "query" ...
- JAVA核心技术I---JAVA基础知识(数据结构基础)
一:数组 (一)基本内容是与C一致的 (二)数组定义和初始化 (1)声明 int a[]; //a没有new操作,没有被分配内存,为null int[] b; //b没有new操作,没有被分配内存,为 ...
- UNIX网络编程中的字节序问题
1.inet_pton 函数原型: inet_pton:将“点分十进制” -> “二进制整数” int inet_pton(int af, const char *src, void *dst) ...
- (转)windows 下安装配置 Nginx 详解
windows 下安装配置 Nginx 详解 本文转自https://blog.csdn.net/kingscoming/article/details/79042874 nginx功能之一可以启动一 ...