您的位置：首页 > 其它

JQ 简单动画显示隐藏效果

2017-11-02 22:24 351 查看

一、概括

jq的显示隐藏动画总共有：

普通显示隐藏效果主要用了hide、show、toggle

淡入淡出主要用到了fadeIn、fadeOut、fadeToggle

滑动效果主要用了slideDown、slideUp、slideToggle

其中各效果用到的toggle都是其他两个属性的切换

二、实例

普通显示隐藏效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>

$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});

//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle();
});
})

</script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>

</body>
</html>

 

淡入淡出效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);

});
$("#out").click(function(){
$("#id1").fadeOut(1000);

});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);

});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);

});
});

</script>

</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>

<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

滑动效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>

#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>

<div id="content">helloworld</div>

</body>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航