JQ動畫__java那條路

顯示、隱藏的動畫效果

show（） / hide()

用法：

    $obj.show(執行事件，回呼函數);

執行時間：show , normal , fast或毫秒數
回呼函數：動畫執行完畢之後要執行的函數 上下滑動式的動畫

slideDown() / slideUp()
作用：通過改變高度來實現顯示或者隱藏的效果
用法同show() / hide() 淡入淡出式動畫效果

fadeIn() / fadeOut()
作用：通過改變不透明度opacity來實現顯示或者隱藏
用法同 show / hide

還可以這麼連寫：

$(“#msg”).fadeIn(2000).fadeOut(1000);
這麼的話這個動畫就是2000秒隱藏1000秒顯示

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQ動畫</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function(){    $("#b1").click(f1);    $("#b2").click(f2);    $("#b3").click(f3);    function f1(){        $("img").fadeIn(2000);        }    function  f2(){        $("img").fadeOut(2000);        }    //動態彈出提示資訊    function f3(){        $("#msg").fadeIn(2000).fadeOut(1000);        }    });</script><style type="text/css">#msg {    border: 1px solid #999;    width: 100px;    padding: 10px;    text-align: center;    background-color: #ddd;    display: none;}</style></head><body><p>  <button id="b1">顯示</button>  <button id="b2">隱藏</button>  <button id="b3">提示</button></p><p> <img src="1.png" /> </p><p id="msg">操作成功。</p></body></html>

自訂動畫效果

animate(位移位置，執行事件，回呼函數)
位移位置：{ }描述動畫執行之後元素的樣式
執行事件：毫秒數
回呼函數：動畫執行結束後要執行的函數
如：

$(“div”).click(function(){$(this).animate({‘left’:’500px’},4000);$(this).animate({‘top:’300px’},2000);});

如：

$("img").animate({"left":"500px"},2000).animate({"top":"300px"},2000);

會使圖片先像右移動500px，用時2s，然後在向下移動300px，用時也是2s

自訂動畫還可以做寬高等改變：

$("div").animate({"height":"400px"},2000).animate({"width":"400px"},2000).animate({"height":"200px"},2000).animate({"width":"200px"},2000);

讓div塊先寬變高，變寬，然後在變回。

。。。但是要先把物體脫離流布局，才能動起來

服務端返回資料 JSON的，

var emps =[{“empno”:”qwe”,“name”:”asd”,“sex”:”man”},{},{},{}];等等

JQuery迴圈

//迴圈遍曆這個emps數組裡的員工，然後去插入到tables

$(emps).each(function(){//擷取本次迴圈的資料//this就是本次迴圈的資料 var $tr = $(“<tr><td>””+this.+empno”</td> <td>””+this.+name”</td> <td>””+this.+sex”</td></tr>”);//或者var $tr = $(“<tr></tr>”);//將這個空行插入到table下$(“tbody”).append($tr);//編號列$tr.append(“<td></td>”);$(“td:last”).text(this.empno);//姓名列$tr.append(“<td>/td>”);$(“td:last”).text(this.name);//性別列//根據這個資料產生tr，插入到table})