多層次圖說，一個接著一個出場：jQuery

一、請先學會基本功：排隊．請編輯元素一個接著一個出場：easy jQuery
二、本單元著重在應用 1px 技法：讓空白版面消失。1px技法css:   style="width: 1px; height: 1px;"

【click the picture ↓】

這是超甜的鳳梨！ 黃澄澄的顏色保證，好吃！ ★ 原產地是台南關廟。 團購超搶手。 電話：#0028888888    ▼ 我削得超漂亮的 ▼

jQuery 程式碼（請放於body之後）：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">



互動驅動程式 （請放於body之後）：

<script>
$(function() {
var flag = 'a0608';
$('#a010608').click(function() {

if(flag == 'a0608') {
$('#b010608').delay(0).show('slide', {direction: 'right'}, 800);
$('#b020608').delay(400).show('slide', {direction: 'left'}, 800);
$('#b030608').delay(1300).show('slide', {direction: 'up'}, 800);

flag = 'b0608';
}

else {
$('#b010608, #b020608, #b030608').hide();
flag = 'a0608';
}

});
});
</script>



CSS 文字語法：

<style>
/* 基本黑體內文（粗）：置中*/
.ironcontentbo0601 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* 基本黑體內文 （粗）：靠右*/
.ironcontentbo060102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* div消失 */
.displano {
display: none;
}
</style>



影音教學：