JS20min Day — 15 滑動效果 (SlideUp, SlideDown)
Jul 10, 2017 · 8 min read

滑動效果常常用來整理太長的文章或條列式的選單,收合起來可以讓整體畫面變得比較乾淨且清晰,一起來看看怎麼時做滑動效果吧!
JavaScript 原生方法寫法
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 300px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<button id='slide-button'>SlideUp/SlideDown</button>
<div id='container'>
Starbuck was no crusader after perils;
in him courage was not a sentiment;
but a thing simply useful to him,
and always at hand upon all mortally practical occasions.
Besides, he thought, perhaps, that in this business of whaling,
courage was one of the great staple outfits of the ship,
like her beef and her bread, and not to be foolishly wasted.
</div>
<script src='./main.js'></script>
</body><script>
let container = document.getElementById('container')
let slideButton = document.getElementById('slide-button') let defaultHeight = 221;
let isMinHeight = false function SlideUpAndDown() {
if (defaultHeight > 0 && !isMinHeight) {
setTimeout(function() {
defaultHeight = defaultHeight - 10
if (defaultHeight < 0) {
isMinHeight = true
defaultHeight = 0
container.style.height = '0px'
return
}
container.style.height = defaultHeight + 'px'
SlideUpAndDown()
}, 2)
}
if (isMinHeight) {
setTimeout(function() {
defaultHeight = defaultHeight + 10
if (defaultHeight > 221) {
isMinHeight = false
defaultHeight = 221
container.style.height = '221px'
return
}
container.style.height = defaultHeight + 'px'
SlideUpAndDown()
}, 2)
}
} slideButton.addEventListener('click', SlideUpAndDown)
</script>
使用 JavaScript 自帶的方法真的很不好寫,而且隨著狀態越來越多,邏輯也會越來越多。
使用 CSS3 transition animation 撰寫
<head>
<meta charset="utf-8">
<title></title>
<style>
.animation {
transition: height .3s;
}
.container {
width: 300px;
border: 1px solid #ccc;
overflow: hidden;
height: 221px;
}
.SlideDown {
height: 0px;
}
</style>
</head>
<body>
<button id='slide-button'>SlideUp/SlideDown</button>
<div class='container animation' id='container'>
Starbuck was no crusader after perils;
in him courage was not a sentiment;
but a thing simply useful to him,
and always at hand upon all mortally practical occasions.
Besides, he thought, perhaps, that in this business of whaling,
courage was one of the great staple outfits of the ship,
like her beef and her bread, and not to be foolishly wasted.
</div>
<script src='./main.js'></script>
</body><script>
let container = document.getElementById('container')
let slideButton = document.getElementById('slide-button')function SlideUpAndDown() {
container.classList.toggle('SlideDown')
}slideButton.addEventListener('click', SlideUpAndDown)
</script>
CSS3 只要用 transition 真的是一個很方便的東西。
使用 jQuery
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
overflow: hidden;
height: 221px;
}
</style>
</head>
<body>
<button id='slide-button'>SlideUp/SlideDown</button>
<div class='container' id='container'>
Starbuck was no crusader after perils;
in him courage was not a sentiment;
but a thing simply useful to him,
and always at hand upon all mortally practical occasions.
Besides, he thought, perhaps, that in this business of whaling,
courage was one of the great staple outfits of the ship,
like her beef and her bread, and not to be foolishly wasted.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='./main.js'></script>
</body><script>
let container = $('#container')
let slideButton = document.getElementById('slide-button') function SlideToggle() {
container.slideToggle()
} slideButton.addEventListener('click', SlideToggle)
</script>
最後會發現 jQuery 也是最短最快的方法。
看看其他相關教學
Day — 1 基本結構 (The Structure of JavaScript), 物件 (Object)
Day — 2 變數 (Variable)
Day — 3 運算子 (Operator)
Day — 4 函數 (Function)
Day — 5 流程控制 (Flow Control)
Day — 6 視窗 (Window), 時間控制(Timer)
Day — 7 認識 HTML, 認識元件, 命名元素 (HTML)
Day — 8 事件 (Event)
Day — 9 選擇器 (Selector), 改變樣式 (Style)
Day — 10 Event 進階應用
Day — 11 CSS Style 與 JavaScript 的互動
Day — 12 龜兔賽跑
Day — 13 jQuery 引用與基本使用 (jQuery)
Day — 14 淡出與淡入 (fadeIn, fadeOut)
Day — 15 滑動效果 (SlideUp, SlideDown)
