jQuery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完之后会执行一个函数。
不想写单位可以直接写数字,写单位要用 ’ '括起来。
演示HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="text/javscript" src="/js/jquery-1.9.0.js"></script>
<script>
$(function(){
var $btn = $('input');
var $box = $('.box');
$btn.click(function(){
$box.animate({
width:300,
height: '300px',
},1000,'swing',function(){
alert('over!!!!!');
});
})
})
</script>
<style>
.box{
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<input type="button" value="动画">
<div class="box"></div>
</body>
</html>
效果:
注:animate(属性值, 时间, 方式, 回调函数)
练习-滑动选项卡
选项卡从旁边滑动过来
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<script type="text/javascript" src="/js/jquery-1.9.0.js"></script>
<script>
$(function(){
var $btn = $('input');
var $div = $('.box');
var point = -1;
$btn.click(function(){
$(this).addClass('input_style').siblings().removeClass('input_style');
$div.animate({
left: point*$(this).index() * 400
},300,'swing');
})
})
</script>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
input{
font-size: 20px;
border: none;
}
.input_style{
background-color: gold;
}
.container{
position: relative;
width: 400px;
height: 300px;
overflow: hidden;
}
.box{
width: 1200px;
position: absolute;
}
.box div{
width: 400px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 300px;
float: left;
}
</style>
</head>
<body>
<input class="input_style" type="button" value="选项一">
<input type="button" value="选项二">
<input type="button" value="选项三">
<div class="container">
<div class="box clearfix">
<div>选项一的内容</div>
<div>选项二的内容</div>
<div>选项三的内容</div>
</div>
</div>
</body>
</html>
效果: