1、显示、隐藏、切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
300px;
height: 300px;
background-color: aqua;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div></div>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").show(500,function(){
alert("显示结束");
})
});
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
alert("隐藏完毕");
})
});
$("button").eq(2).click(function(){
$("div").toggle(1000,function(){
alert("切换成功");
})
});
})
</script>
</body>
</html>
- 参数1：速度
- 参数2：切换的效果
- 参数3：在动画执行完后执行函数
2、淡入淡出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
300px;
height: 300px;
background-color: aqua;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div></div>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
});
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
});
$("button").eq(2).click(function(){
$("div").fadeToggle(1000);
});
$("button").eq(2).click(function(){
$("div").fadeTo(1000,0.5);//速度和透明度要必须写
});
})
</script>
</body>
</html>
3、自定义动画
<body>
<div></div>
<button>start</button>
<script>
$(function(){
$("button").click(function(){
$("div").animate({
left : 500,
top : 200
},1000);
})
})
</script>
</body>