在我们jQuery中为我们封装了许多好玩的东西,让我为大家介绍一下滑入与滑出吧!
slideUp()滑出
slideDown()滑入
slideToggle()切换滑入滑出
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div {width: 200px;height: 300px;background-color: red;}</style>
</head>
<body><button>点击滑出</button><button>点击滑入</button></button><button>点击切换滑入滑出</button><div></div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>// 给淡出button设置点击事件$("button").eq(0).click(function () {// $("div").slideUp(多少毫秒完成滑出)// 不设置毫秒也是可以的$("div").slideUp()})// 给淡入button设置点击事件$("button").eq(1).click(function () {// $("div").slideDown(多少毫秒完成滑入)// 不设置毫秒也是可以的$("div").slideDown()})// 给切换滑入滑出按钮设置点击事件$("button").eq(2).click(function () {// $("div").slideToggle(多少毫秒完成滑入或滑出)// 不设置毫秒也是可以的$("div").slideToggle()})
</script>
</html>
效果图:
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!