HTML中JQuery动画效果的实例
2018-09-13 本文已影响70人
阿猫阿狗py
效果类型
| 语法关键字 | 效果 |
|---|---|
| show | 显示-动画效果 |
| hide | 隐藏-动画效果 |
| toggle | 显隐-动画效果 |
| slideUp | 卷帘拉开-动画效果 |
| slideDown | 卷帘收起-动画效果 |
| slideToggle | 卷帘显示/隐藏--动画效果 |
| fadeIn | 透明显示-动画效果 |
| fadeOut | 透明隐藏-动画效果 |
| fadeToggle | 透明显隐-动画效果 |
| fadeTo(time,透明度) | 指定透明度-动画效果 |
| animate | 自定义动画-动画效果 |
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画操作</title>
<script src="./js/lib/jquery-2.2.4/jquery-2.2.4.min.js"></script>
<style>
#box{
width:500px;
height: 500px;
margin: auto;
background-color: black;
}
</style>
</head>
<body>
<button id="btn1">显示-动画效果</button>
<button id="btn2">隐藏-动画效果</button>
<button id="btn3">显隐-动画效果</button>
<button id="btn4">卷帘拉开-动画效果</button>
<button id="btn5">卷帘收起-动画效果</button>
<button id="btn6">卷帘显示/隐藏--动画效果</button>
<button id="btn7">透明显示-动画效果</button>
<button id="btn8">透明隐藏-动画效果</button>
<button id="btn9">透明显隐-动画效果</button>
<button id="btn10">指定透明度-动画效果</button>
<button id="btn11">自定义动画-动画效果</button>
<div id="box"></div>
<script>
$(function(){
$("#btn1").click(function () {
//显示效果
$("#box").show(2000);
});
$("#btn2").click(function(){
///隐藏效果
$("#box").hide(2000);
});
$("#btn3").click(function(){
///显隐效果
$("#box").toggle(2000);
});
$('#btn4').click(function(){
//卷帘拉关闭
$("#box").slideDown(2000);
});
$('#btn5').click(function(){
//卷帘拉开
$("#box").slideUp(2000);
});
$('#btn6').click(function(){
//卷帘显隐
$("#box").slideToggle(2000);
});
$('#btn7').click(function(){
//透明隐藏
$("#box").fadeIn(2000);
});
$('#btn8').click(function(){
//透明显示
$("#box").fadeOut(2000);
});
$('#btn9').click(function(){
//透明显示/隐藏
$("#box").fadeToggle(2000);
});
$('#btn10').click(function () {
//指定透明度
$("#box").fadeTo(2000,0.5);
});
$('#btn11').click(function () {
//动画效果自定义转换
$("#box").animate({
"margin-top":"300px",
"width":"100px",
"height":"100px"
},1000).animate({
"margin-left":"200px",
"width":"100px",
"height":"100px"
},1000).animate({
"margin-left":"1000px",
"width":"100px",
"height":"100px"
},1000).animate({
"width":"500px",
"height":"500px"
},1000);
})
})
</script>
</body>
</html>
