动画效果

来源：互联网发布：淘宝怎么找内部优惠券编辑：程序博客网时间：2024/06/05 07:34

<!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");
});

})

阅读全文

0 0