jQuery 自定义动画

原创2018-12-11 09:58:1482
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> jQuery 自定义动画</title> <script type="text/javascript" src="jquery-3.3.1.min.js&

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> jQuery 自定义动画</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style type="text/css">

div{width:200px;height:200px;background:pink;position:absolute;}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.but1').click(function(){

$('p').animate({fontSize:"400"},1500)

})

$('.but2').click(function(){

$('div').animate({

left:'200px',

opacity:'0.3',

height:'400px',

width:'400px'


},1500)

})

})

</script>

</head>

<body>

<button class='but1'>点击字体放大</button>

<p> jQuery 自定义动画 jQuery 自定义动画</p>

<button class="but2">点击移动</button>

<div></div>

</body>

</html>


发布手记

热门词条