jQuery动画效果

原创 2019-07-31 10:36:57 239
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navigation导航</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navigation导航</title>
<script type="text/javascript" src="static/jQuery/jquery-3.4.1.js"></script>
<link rel="stylesheet"  type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{padding:0px;margin:0px;}
.main_nav{margin:200px auto;width:1290px;height:50px;}
.heading{width:150px;height:50px;float:left;line-height:50px;text-align:center;border:1px solid #9D60FC;}
.sp{height:50px;display:inline-block;}
.clear{clear:both;}
.btn{width:200px;height:100px;border:none;background:coral;position:absolute;top:50px;left:600px;}
</style>
</head>
<body>
<div>
<div>
<button>改变背景</button>
</div>
<div>
<div><i class="fa fa-home"></i>&nbsp;&nbsp;首页</div>
<div><i class="fa fa-newspaper-o"></i>&nbsp;&nbsp;新闻头条</div>
<div><i class="fa fa-television"></i>&nbsp;&nbsp;热播好剧</div>
<div><i class="fa fa-video-camera"></i>&nbsp;&nbsp;最新电影</div>
<div><i class="fa fa-heartbeat"></i>&nbsp;&nbsp;娱乐八卦</div>
<div><i class="fa fa-folder-open-o"></i>&nbsp;&nbsp;热门小说</div>
<div><i class="fa fa-plus-square"></i>&nbsp;&nbsp;健康医疗</div>
<div><i class="fa fa-soccer-ball-o"></i>&nbsp;&nbsp;热门游戏</div>
</div>
<div></div>
</div>
<script type="text/javascript">
// $(document).ready(function(){})
$(function(){
$('.btn').click(function(){
$('body').css('background','#ccc');

$('.heading').css({'color':'red','font-size':'15spx','font-weight':'bold'});

$('.btn').click(function(){
        $('.btn').fadeTo(1000,0.5);
        })

        // $('.btn').click(function(){
        //  $('.btn').fadeTo(1000,1);
        // })

       

        $('.heading').animate({
left:'400px',
//使用预定义的值 show hide toggle
height:'toggle'

},1000);
})
})

</script>
</body>
</html>


批改老师:天蓬老师批改时间:2019-07-31 14:13:43
老师总结:jQuery的动画功能很不错, 但现在大多使用专业的动画库了, 有空可以了解一下

发布手记

热门词条