diagonalFade 實際執行畫面

diagonalFade 是一個 jQuery 框架下的套件，這一個套件主要的功能是讓你能夠輕鬆的使網頁元素能夠朝指定方向淡入淡出，你所要做的事情只有指定項目組所在的容器，然後指定他的元素和淡入或淡出以及他的方向。適用於現在大部分的瀏覽器之上。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//diagonalFade 的主程式碼
<script type = "text/javascript" src = "j/jquery.diagonalFade.js"></script>

第二步 寫入網頁HTML元素部分
<div id = "image_cascade" class = "container_9">
<img src = "i/1.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/2.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/3.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/4.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/5.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/6.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/7.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/8.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/9.jpg"  height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/10.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/11.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/12.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/13.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/14.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/15.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/16.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/17.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/18.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/19.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/20.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/21.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/22.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/23.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/24.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/25.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/26.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/27.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/28.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/29.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/30.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/31.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/32.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/33.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/34.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/35.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/36.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<div class = "clear"></div>
</div>


第三步 使用套件方法使程式起作用
$(function(){
  $("#container").diagonalFade({
    time: 100,
    fadeDirection_x: 'left-right',
    fadeDirection_y: 'top-bottom',
    fade: 'out',
    complete: null
  });
});
附上參數說明

參數	預設	說明
time	100	動畫時間
fadeDirection_x	'left-right'	X 軸方向 left-right,right-left
fadeDirection_y	'top-bottom'	Y 軸方向 top-bottom,bottom-top
fade	'out'	淡入或淡出 in,out
complete	null	淡入或淡出完成後執行

作者網站：http://timeglider.com/jquery/
檔案大小：360 KB(包含範例)
檔案下載：https://github.com/jonobr1/diagonalFade
檔案備份：下載