排隊．請編輯元素一個接著一個出場：easy jQuery

一、本範例的進階應用：多層次圖說，一個接著一個出場。
二、本單元著重在對語法邏輯系統的思考理解。不要怕，真的超簡單，又有video教學。

請 你按這一個div，
然後其他的編輯元素，就會
一個接著一個的出場！

一個一個出場，是一種互動表現形式！

互動是一種以形式來呈現意義給出的文本樣 態，重點在於思考「互動樣態」與讀者的互動之 間，可以帶出來的意義感受。這是數位文本可以在文本表現上所帶來的全新方法。

我們以DIV來當作互動元件。 因之，DIV可以呈現的樣子，如表格、圖文整合，都可以用這種方法來表現。

最後，當然，什麼的文本表現意義才是適合這一種 互動樣態的使用，就考驗創作者的思考。

這是後面的文字，主要是讓你知道，這個一互動模態，版面會隨著內容出現而變動。如果你想要讓內容依次跑出來的同時，版面是固定不變的。請參考進階技能，【1px固定版面技法】。

程式碼

<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">


驅動程式

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

if(flag == 'a0528') {
$('#b010528').delay(0).show('slide', {direction: 'left'}, 800);
$('#b020528').delay(800).show('slide', {direction: 'up'}, 800);
$('#b030528').delay(1600).show('slide', {direction: 'down'}, 800);
$('#b040528').delay(2400).show('slide', {direction: 'right'}, 800);
flag = 'b0528';
}

else {
$('#b010528, #b020528, #b030528, #b040528').hide();
flag = 'a0528';
}

});
});
</script>

紅色字體是要跑出來DIV的 ID 。本例有四個。可自行增加。
你可以自己調整方向："left", "right", "up", "down"，藍色字體者。
數字可以調整速度。一秒是1000。綠色字體者

CSS語法：

<style>

/* 中標 */
.midtitle0528 {
font-family: Verdana, '微軟正黑體';
font-size: 2.13em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.07em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}

/* 基本黑體內文 */
.ironcontent052802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-bottom: 1em;
}

/* 基本黑體內文+粗+背景圖 */
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
margin-top: 1em;
}

/* 基本細明體內文 */
.ironcontentmi0528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
padding-left: 0px 5px 5px 0px;
}

/* 隱藏DIV */
.displno {
display: none;
}

</style>



教學影片：