您的位置：首页 > Web前端 > JavaScript

JQ自定义动画

2016-10-29 10:11 183 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style type="text/css">
#one{
width: 300px;
height: 300px;
background-color: red;
color: #fff;
font-size: 50px;
line-height: 300px;
margin: 20px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="one">动画</div>
<input type="button" name="" id="custom" value="自定义动画" />
<input type="button" name="" id="custom2" value="自定义动画2" />
<input type="button" name="" id="custom3" value="自定义动画3" />
<input type="button" name="" id="stop" value="停止动画" />
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

$("#custom").click(function () {
$("#one").animate({
width:"500",
fontSize:"100",
borderRadius:"50%"
},4000);
});

$("#custom2").click(function () {
$("#one").animate({
width:"+=50",
height:"-=20"
},2000);
});

$("#custom3").click(function () {
$("#one").animate({
height:"500"
},1000);
$("#one").animate({
width:"800"
},500);
$("#one").animate({
fontSize:"150"
},700);
$("#one").animate({
borderRadius:"50%"
},2000);
});

$("#stop").click(function () {
$("#one").stop(true,false);
});
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航