連結：擅長ＯＯ的朋友
——————————————————————–
主要練習CSS div 變形與動畫效果
老問題…”太先進的效果” 微軟(IE Edge)是不承認的 (Firefox這次也淪陷了)
.road_middle{
position:relative;
top:200px;
display:block;
margin:0 auto;
border-color: transparent transparent #EBD8AF transparent;
border-style: solid;
border-width: 0 200px 500px 200px;
height: 0px;
width: 30%;
max-width:100px;
-webkit-border-radius:250px; //失效的部分
-moz-border-radius:250px; //失效的部分
border-radius:250px; //失效的部分
transform:scale(0.5,2);
transition:transform 0.5s ease-out, border-width 0.5s ease-out;
z-index:2;
}
這次練習的心得是：如果不是單純只要求一個形狀，之後有其他的物件堆疊或放置在容器時，建議不要這樣搞了，
光 transform 要逆推回算就有夠麻煩
另外 transition 的部分，如果條件都一樣的話，其實可以直接使用 transition : all 0.5s ease-out; 來處理比較省事。
——————————————————————–
jQuery 物件控制
cloud_effect() 主要用來處理文字雲動畫效果
利用animete來產生位移和透明度 (*ps: jQ的animeta效能很差，其實可以利用 addclass 的方式來處理會比較好)
這次的練習重點問題在於萬惡的 setInterval 永遠跑不完，必須在cloud_effect() 中設定觸發 clearInterval 的條件
基本上這部分沒有問題，但是如果要 “從頭跑一次文字雲” 就不是這麼簡單了…
首先 animeta 產生的 style 要先清空 $(this).removeAttr(“style”) 不然物件位置會是 animeta 跑完最後的style值
所以只要該物件 animeta 跑完後就直接處理清空style的程序。
最後則是判斷是否每個文字雲都跑完了？如果跑完了，就回到第一個開始重跑 i=0;
在這邊會發現文字的顏色是照舊的，因為文字的style是一開始頁面載入資料時用php生成的，
如果要達到重跑時文字顏色在重算的話，那就一樣是把style值交給 jQ 來處理
——————————————————————–
其他：
其實腦中有很多很多想法，只是如果要做到超完善…時在會很曠日廢時，
所以重點還是放在 “簡單不失有趣” 的要點上…(光這一點就很難抓了
