jQuery动画
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#showdiv{
height: 300px;
background: orange;
display: none;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
function test() {
$("#showdiv").show();
}
</script>
</head>
<body onload="test()">
<h3>jQuery动画</h3>
<div id="showdiv">
</div>
</body>
</html>
注意:display:none是隐藏效果,也就是orange颜色不能显示。但是在body里加一个onload是表示页面加载的时候出现效果。
这个和不加display:none也不是完全相同可以增加速度
例如:
$("#showdiv").show();在show的()增加时间:3000
实现页面缓慢加载。。。
还有一些属性:
$("#showdiv").hide(3000);//隐藏效果,前一句show会缓慢加载处理,hide会收回
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#showdiv{
height: 300px;
background: orange;
display: none;
}
#div01{
height: 300px;
background: green;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
function test() {
$("#showdiv").show(3000);
$("#showdiv").hide(3000);
}
</script>
</head>
<body onload="test()">
<h3>jQuery动画</h3>
<div id="showdiv"></div>
<div id="div01"></div>
</body>
</html>
还有可以改变show和hide的出场顺序来展示不同效果,注意不同的时间间隔会展现不同效果
function test() {
$("#showdiv").show(3000);
$("#div01").hide(3000);
}
function test() {
$("#showdiv").show(3000);
$("#div01").hide(3000);
$("#showdiv").hide(3000);
$("#div01").show(3000);
}
toggle是切换元素可见状态
$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);
slideDown()方法:通过高度变化(向下增大)来动态显示所有匹配效果,在显示完成可选的触发一个回调函数
$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
淡入淡出的效果:——最后所有的元素会消失在视野
$("#showdiv").show(3000);
$("#div01").hide(3000);
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").show().slideUp(3000);
$("#showdiv").fadeOut(3000);
动态操作宽高
现在是以div为例,一般是图片的切换