jQuery动画

最新推荐文章于 2022-08-10 22:45:00 发布

巴拿马_

最新推荐文章于 2022-08-10 22:45:00 发布

阅读量275

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/FH_94/article/details/78051639

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8" />
<title>jQuery动画</title>
</head>

<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/jquery.color.js" ></script>
<script>
$(function(){
$('#btn1').click(function(){
$('img').hide(2000,function(){
var size =$('img:hidden').length;
alert("动画隐藏了"+size+"个");
})
});

$('#btn2').click(function(){
$('img').show(2000,function(){
var size = $("img:visible").size();
alert("动画显示了"+size+"个");
})
});

$('#btn3').click(function(){
$('img').toggle(2000,function(){
// 显示隐藏切换
})
});

$('#btn4').click(function(){
$('img').slideUp(2000,function(){
// 上拉隐藏
})
});

$('#btn5').click(function(){
$('img').slideDown(2000,function(){
// 下拉显示
})
});

$('#btn6').click(function(){
$('img').slideToggle(2000,function(){
// 上拉下拉显示隐藏切换
})
});

$('#btn7').click(function(){
$('img').fadeOut(2000,function(){
// 淡出
})
});

$('#btn8').click(function(){
$('img').fadeIn(2000,function(){
// 淡入
})
});

$('#btn9').click(function(){
$('img').fadeTo(2000,0.1,function(){
// 指定透明度
})
});

$('#go').click(function(){
$('#block').animate({
width:"90%",
height:"100%",
fontSize:"10em"
},2000)
.animate({
borderWidth:10,
opacity:0.2,
backgroundColor:"red"
},2000);
});
});
</script>

<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">显隐切换</button>
<button id="btn4">隐藏2</button>
<button id="btn5">显示2</button>
<button id="btn6">显隐切换2</button>
<button id="btn7">透明2（淡出）</button>
<button id="btn8">透明2（淡入）</button>
<button id="btn9">指定透明度</button>
<br />
<img src="img/mm1.jpg" style="width: 300px; height: 300px;"/>

<br /><br />
<button id="go">Run</button>
<button id="btn10">停止动画</button>

<div id="block" style="border: deepskyblue solid; background-color: aquamarine;">Lily!</div>
</body>
</html>