JQuery实现隐藏和显示动画效果
本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码，供大家参考，具体内容如下
隐藏和显示
语法
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
参数说明：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
div {
background: lightblue;
padding: 20px;
}
p {
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function() {
$("#btnHide").click(function() {
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000, function() {
alert("隐藏完成！");
});
});
$("#btnShow").click(function() {
//$("div").show();
//$("div").show(2000);
$("div").show(2000, function() {
alert("显示完成！");
});
});
$("#btnToggle").click(function() {
//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000, function() {
alert("切换完成！");
});
});
});
</script>
</head>
<body>
<button id="btnHide">隐藏-div</button>
<button id="btnShow">显示-div</button>
<button id="btnToggle">切换显示和隐藏-p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>
效果展示
隐藏效果展示
显示效果展示
切换显示和隐藏
从P1切换成了P2
淡入和淡出
语法
- $(selector).fadeIn([speed,callback]);
- $(selector).fadeOut([speed,callback]);
- $(selector).fadeToggle([speed,callback]);
参数说明：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>效果</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
div {
background: lightblue;
padding: 20px;
}
p {
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function() {
$("#btnIn").click(function() {
//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000, function() {
alert("淡入完成！");
});
});
$("#btnOut").click(function() {
//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000, function() {
alert("淡出完成！");
});
});
$("#btnToggle").click(function() {
//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000, function() {
alert("切换完成！");
});
});
});
</script>
</head>
<body>
<button id="btnIn">淡入-div</button>
<button id="btnOut">淡出-div</button>
<button id="btnToggle">切换淡入淡出-P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>
效果与隐藏和显示相差不大
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery控制TR显示隐藏的三种常用方法
网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏</td>
-
jquery显示隐藏input对象
1 所属部门选择其他时 显示一个输入框进行填写 #html <select id='deptid' name='deptid' class="select" onchange='deptChange()'> <c:forEach var="item" items="${deptidList}" varStatus="status"> <option value='${item.value}'>
-
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参
-
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l
-
jquery和js实现对div的隐藏和显示方法
jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi
-
jQuery控制TR显示隐藏的几种方法
网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使
-
Jquery 点击按钮显示和隐藏层的代码
代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"
-
jQuery动态显示和隐藏datagrid中的某一列的方法
复制代码 代码如下: $(function(){ $('#tt').datagrid({ title:'报表统计', width:1020, height:400, url:'', fitColumns:true, loadMsg:'正在获取,请稍侯...', singleSelect:true, nowrap:false, columns:[[ {field:'REGION_NAME',title:'分公司',width:30,align:'center'}, {field:'COUNTY_N
-
Jquery实现显示和隐藏的4种简单方式
Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&
-
JQuery显示、隐藏div的几种方法简明总结
例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice").attr("style", "display:block;");//第2种方法 //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c