摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ-动画函数大全</title>
<style type="text/css">
input{
&n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ-动画函数大全</title>
<style type="text/css">
input{
border:1px solid #060;
font-size:14px;
padding:4px;
font-family:Arial, Helvetica, sans-serif;
background-color:#999;
color:#0FF;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
//$("img").hide("fast"); //$("img").hide("normal"); //$("img").hide("slow");//动画消失的时间
$("img").hide(3000,function(){
// alert("完成了！")
});
});
$("input:eq(1)").click(function(){
$("img").show(3000);//显示图像
});
$("input:eq(2)").click(function(){
$("img").toggle(3000);//可以显示或隐藏图片
});
$("input:eq(3)").click(function(){
$("img").fadeOut(3000);//从不透明变透明
});
$("input:eq(4)").click(function(){
$("img").fadeIn(3000);//从透明变不透明
});
$("input:eq(5)").click(function(){
$("img").fadeToggle(3000);//透明不透明相互转换
});
$("input:eq(6)").click(function(){
$("img").fadeTo(3000,0.2);//指明到相关的透明度
});
$("input:eq(7)").click(function(){
$("img").slideUp(3000);//收起
});
$("input:eq(8)").click(function(){
$("img").slideDown(3000);//展开
});
$("input:eq(9)").click(function(){
$("img").slideToggle(3000);//收起或展开
});
$("input:eq(10)").click(function(){
$('img').animate({opacity:'0.3',height:'400px',width:'400px'},800)
});
$("input:eq(11)").click(function(){
$('img').animate({opacity:'0.3',height:'100px',width:'100px'},3000)
});
});
</script>
</head>
<body>
<input type="button" value="Hide"/>
<input type="button" value="Show"/>
<input type="button" value="toggle"/>
<input type="button" value="FadeOut"/>
<input type="button" value="FadeIn"/>
<input type="button" value="FadeToggle"/>
<input type="button" value="FadeTo"/>
<input type="button" value="slideUp"/>
<input type="button" value="slideDown"/>
<input type="button" value="sledeToggle"/>
<input type="button" value="animate放大"/>
<input type="button" value="animate缩小"/>
<p><img src="QQ截图20181130113832.jpg" width="100px" height="100px"></p>
</body>
</html>
