动画效果

最新推荐文章于 2023-06-22 21:22:32 发布

第九年

最新推荐文章于 2023-06-22 21:22:32 发布

阅读量233

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_39173989/article/details/77430090

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/demo.css">
<script src=js/jquery.min.js></script>
<script src=js/demo.js></script>
</head>
<body>
<button type="button" class="hide">隐藏xtw</button>
<button type="button" class="show">显示zjk</button>
<button type="button" class="btn1">让圆形淡入</button>
<button type="button" class="btn2">让圆形淡入淡出</button>
<button type="button" class="btn3">开始动画</button>
<div class="one">
<img src="images/xtw.PNG" />
</div>
<div class="two">
<img src="images/zjk.PNG">
</div>

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>

<div class="five">
点击我我会告诉你谁是世界上最帅的人
<img src="images/zjk.PNG" />
</div>

<div class="three">web1706部谁最美</div>
<div class="six">我最美</div>

<div class="seven1"></div>
<div class="seven2"></div>
<div class="seven3"></div>
<div class="seven4"></div>
<div class="seven5"></div>

</body>
</html>

$(function(){

$(".hide").click(function(){
$(".one").hide();

})

$(".show").click(function(){
$(".two").show();
})

$(".btn1").click(function(){
$(".circle1").fadeIn();
$(".circle2").fadeIn("slow");
$(".circle3").fadeIn(3000);
});

$(".btn2").click(function(){
$(".circle1").fadeOut();
$(".circle2").fadeOut("slow");
$(".circle3").fadeOut("3000");
});

$(".three").click(function(){
$(".six").slideDown("slow");
});

$(".five").click(function(){
$("img").show();
})

$(".btn3").click(function(){
var div=$(".seven1");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'180px',opacity:'0.4'},"slow");
div.animate({width:'20px',opacity:'0.8'},"slow");
});

$(".btn3").click(function(){
var div=$(".seven2");
div.animate({height:'300px',opacity:'1.2'},"slow");
div.animate({width:'300px',opacity:'1.6'},"slow");
div.animate({height:'20px',opacity:'1.2'},"slow");
div.animate({width:'81px',opacity:'1.6'},"slow");
});

$(".btn3").click(function(){
var div=$(".seven3");
div.animate({height:'300px',opacity:'1.2'},"slow");
div.animate({width:'300px',opacity:'1.6'},"slow");
div.animate({height:'160px',opacity:'1.2'},"slow");
div.animate({width:'25px',opacity:'1.6'},"slow");
});

$(".btn3").click(function(){
var div=$(".seven4");
div.animate({height:'300px',opacity:'1.2'},"slow");
div.animate({width:'300px',opacity:'1.6'},"slow");
div.animate({height:'180px',opacity:'1.2'},"slow");
div.animate({width:'80px',opacity:'1.6'},"slow");
});

})