首页 > 代码库 > JQuery效果
JQuery效果
一下代码均未做浏览器兼容，可能部分浏览器不适用，建议使用谷歌浏览器
一.隐藏与显示
1.简单的隐藏效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点击消失1</p>
<p>点击消失2</p>
</body>
</html>
2.另一种隐藏效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".father .son").click(function(){
$(this).parents(".father").hide("fast");
});
});
</script>
<style type="text/css">
div.father{
background-color: yellow;
padding: 7px;
border: solid 2px red;
}
</style>
</head>
<body>
<div class="father">
<p>这是一句话</p>
<button class="son">点击消失</button>
</div>
</body>
</html>
3.将显示和隐藏效果结合在一起
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide("slow");
});
$(".show").click(function(){
$("p").show("swing");
});
});
</script>
</head>
<body>
<p>这是一句话</p>
<button class="hide">点击隐藏</button>
<button class="show">点击出现</button>
</body>
</html>
4.语法
$(selector).show(speed,easing,callback)
根据JQuery的参考手册，上面的参数依次是速度（slow，fast，具体的秒数（毫秒为单位）），动画方式（swing（前后慢，开头块），linear（匀速）），回调函数。
5.使用toggle（）实现简洁的出现隐藏效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hs").click(function(){
$("p").toggle("slow"); //转换器
});
});
</script>
</head>
<body>
<p>这是一句话</p>
<button class="hs">点击隐藏or出现</button>
</body>
</html>
二.淡入与淡出
1.fadeIn（）淡入
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("hs").click(function(){
$("#div1").fadeIn("slow");
$("#div2").fadeIn("slow");
$("#div3").fadeIn("slow");
});
});
</script>
</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>
</body>
</html>
2.fadeOut实现淡出
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("hs").click(function(){
$("#div1").fadeOut("slow");
$("#div2").fadeOut("slow");
$("#div3").fadeOut("slow");
});
});
</script>
</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>
</body>
</html>
3.fadeToggle()实现淡入淡出
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("hs").click(function(){
$("#div1").fadeToggle("slow");
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle("slow");
});
});
</script>
</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;display: none;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;display: none;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;display: none;background-color: yellow"></div>
</body>
</html>
4.fadeTo（）实现颜色的改变
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("hs").click(function(){
$("#div1").fadeTo("slow" 0.5); //需要设置speed和opacity（0-1）
$("#div2").fadeTo("slow" 0.5);
$("#div3").fadeTo("slow" 0.5);
});
});
</script>
</head>
<body>
<button class="hs">点击淡入方框</button>
<div id="div1" style="width: 50px;height: 50px;background-color: red"></div>
<div id="div2" style="width: 50px;height: 50px;background-color: blue"></div>
<div id="div3" style="width: 50px;height: 50px;background-color: yellow"></div>
</body>
</html>
3.滑动
1.使用slideDown（）实现下滑
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(){
$("#d2").slideDown("slow");
});
});
</script>
<style type="text/css">
#d1,#d2{
padding: 5px;
background-color: red;
text-align: center;
border: solid 1px yellow;
}
#d2{
padding: 10px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">下滑出来的界面</div>
</body>
</html>
2.使用slideUp（）实现上滑
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(){
$("#d2").slideDown("slow");
});
$("#d2").click(function(){
$("#d2").slideUp("slow");
});
});
</script>
<style type="text/css">
#d1,#d2{
padding: 5px;
background-color: red;
text-align: center;
border: solid 1px yellow;
}
#d2{
padding: 10px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">点击上滑</div>
</body>
</html>
3.使用slideToggle（）实现上下滑动转换
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(){
$("#d2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#d1,#d2{
padding: 5px;
background-color: red;
text-align: center;
border: solid 1px yellow;
}
#d2{
padding: 10px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="d1">点击下滑</div>
<div id="d2">点击上滑</div>
</body>
</html>
4.动画
1.语法
$(selector).animate({params},speed,callback);
参数分别是形成动画的css的参数值（必须），速度（可选），回调函数（可选）
2.一个简单的实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".animate").click(function(){
$(".animate").animate({left:‘250px‘});
});
});
</script>
<style type="text/css">
.animate{
border: solid 4px red;
background-color: yellow;
text-align: center;
position: absolute; //需要设置为relative fixed或者absolute
}
</style>
</head>
<body>
<div class="animate" >
点击发生变化，右移250px
</div>
</body>
</html>
3.稍微复杂的动画
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".animate").click(function(){
$(".animate").animate({
left:‘250px‘, //多个属性值发生改变
opacity:‘0.5‘,
width:‘100px‘,
height:‘100px‘
});
});
});
</script>
<style type="text/css">
.animate{
border: solid 4px red;
background-color: yellow;
text-align: center;
position: absolute; //需要设置为relative fixed或者absolute
}
</style>
</head>
<body>
<div class="animate" >
点击发生复杂变化
</div>
</body>
</html>
4.注意点
几乎可以使用所有的css属性不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件。
5.相对值动画（与当前值不同而产生的动画效果）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".animate").click(function(){
$(".animate").animate({
left:‘+=250px‘, //不断向右移
});
});
});
</script>
<style type="text/css">
.animate{
border: solid 4px red;
background-color: yellow;
text-align: center;
position: absolute; //需要设置为relative fixed或者absolute
}
</style>
</head>
<body>
<div class="animate" >
点击发生复杂变化
</div>
</body>
</html>
6.使用预定义值（toggle，hide，show）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".animate").click(function(){
$(".animate").animate({
right:‘hide‘
});
});
});
</script>
<style type="text/css">
.animate{
border: solid 4px red;
background-color: yellow;
text-align: center;
position: absolute; //需要设置为relative fixed或者absolute
}
</style>
</head>
<body>
<div class="animate" >
点击发生复杂变化
</div>
</body>
</html>
7.动画队列
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".animate").click(function(){
var div = $(".animate");
div.animate({left:‘250px‘}); //按照一定的顺序完成动画
div.animate({opacity:‘0.5‘});
});
});
</script>
<style type="text/css">
.animate{
border: solid 4px red;
background-color: yellow;
text-align: center;
position: absolute; //需要设置为relative fixed或者absolute
}
</style>
</head>
<body>
<div class="animate" >
点击发生复杂变化
</div>
</body>
</html>
5.停止动画
1.不带参数的stop（）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">停止滑动</button> <div id="flip">点我向下滑动面板</div> <div id="panel">Hello world!</div> </body> </html>
2.带参数的stop（）方法
$(selector).stop(stopAll,goToEnd);
参数表示：stopAll（停止正在进行的动画，如果有排队的动画，可以执行），goToEnd（结束所有动画，并呈现完成动画静态状态）
6.callback函数
1.注意
在动画全部完成之后执行
2.实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".animate").hide("slow",function(){
alert("已经被隐藏了！"); //一个回调函数
});
});
</script>
</head>
<body>
<div class="animate" >
隐藏之后弹出提示框
</div>
</body>
</html>
7.Chaining
1.作用
链接动作和方法
2.实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".animate").hide("slow").show("slow");
});
</script>
</head>
<body>
<div class="animate" >
隐藏之后弹出提示框
</div>
</body>
</html>
JQuery效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。