※ 引述《JYHuang (夏天到了，冷不起來了說)》之銘言： : 這幾天在寫一個grid的功能，遇到了一點小問題。 : 就拿出來討論一下。 : ╔═╦═╦═╗ : th ║1 ║2 ║3 ║ : ╟─╫─╫─╢ : td ├─┼─┼─┤ : td ├─┼─┼─┤ : td └─┴─┴─┘ : 簡單的說，我要做的動作大至上是click th[n]時， : th跟每列的第n個td都做fadeOut的動作 : 然後再用test()計算table的寬度 : 首先 : $("thead th").click(function(){ : var index =$(this).index(); : $("td:eq("+index+")","tr").fadeOut('slow'); : test(); : }); : 當然..事情沒憨人想的這麼簡單 : javascript的指令是不會停下來等動作執行完再執行下一行的 其實是jQuery跑特效時不知用了什麼方法使得 程式不會卡在特效跑完才繼續 我猜應該是用setTimeout的方式吧... 事實上javascript還是一行跑完才跑下一行的 : 所以fadeOut這種有時間軸的動作會跟test()一起被執行 : 這樣一來計算出來的寬度就有誤了。 : 所以接著試試看callback : $("thead th").click(function(){ : var index =$(this).index(); : $("td:eq("+index+")","tr").fadeOut('slow',test); : }); : 不過問題又來了.. : 要執行的對像是一個集合.. : 所以callback會被每一個子元件重複的執行... : 此時想到了JQuery還有一個queue的功能.. : 不過看了半天官方API文件還是一頭霧水..只好慢慢踹.. : jQuery.queue( $("td:eq("+index+")","tr")[0], "fx", function () { : test(); : jQuery.dequeue( this ); : }); : 問題在紅色的框那裡.. : 那個框似乎是指集合的index : 當集合第index個元件執行完之後才會跑test()，而這裡是以元件的集合做動作 : 所以如果照著官方給[0]的話 : 會在第一行的td fadeOut後就執行test了 : 所以要先計算出集合的長度.. : var _len = $("td:eq("+index+")","tr").size() : jQuery.queue( $("td:eq("+index+")","tr")[_len -1], "fx",.... : 或是直接指向集合的最後一個元件 : jQuery.queue( $("td:eq("+index+")","tr").filter(":last")[0], "fx",..... : 這邊用filter而不是selector中用:last，是因為這是指所以集合中的最後一個 : 直接在Selector中用:last的話，會是指每個tr第index個td的最後一個 : JQuery的selector好複雜 =.=... 其實只要用$(selector).last()就好了~囧 : 另外... : 那個dequeue的功用到底是？ queue很好很強大 簡單的說就是插隊就對了~ 例如一堆人排隊買飲料 一般的店(javascript)都是前面的人先結帳而且拿到飲料 下一個人才能結帳買飲料 而換jQuery開店就變成 一樣排隊結帳 但是結完帳以後就先去旁邊等飲料 換下一個人去結帳 然後去旁邊等飲料 下一個又遞補上去... 然後現在有個人插隊(queue)進去 他很機車 他先等其他結帳完的人拿到飲料離開後才結帳 他結帳完以後就一樣去旁邊等飲料 其他人繼續結帳 而dequeue的意義就是那個插隊的人離開的動作 如果用jQuery.queue的方式是一定要加dequeue 不過具體上我也不了解deuqueue到底是什麼意思 @@" 因為$(selector).queue()沒加dequeue也會跑阿... 一個簡單的範例： http://jsfiddle.net/9qx9z/2/ 剛剛改了一下範例 各位可以注意div#x淡出時 th、td也在淡出 代表即使特效執行中 程式還是繼續往下跑 同時div#c也在淡入 而等到th、td淡出效果跑完以後 div#a緊接著寫上'%'與'@' 同時block1也在淡出 此時queue插隊完 th、td又再度淡入 也就是順序的去執行特效 以這個範例來說 th、td的順序是 th、td先是淡出 然後queue插隊進來 等到淡出結束以後就換queue執行 queue執行完以後才換淡入執行 -- 推 onion0350754:＿＿子，＿不異空，空不異＿＿，＿即是空，空即是＿ 07/27 17:49 推 wannahappy2: 射精 07/27 17:50 推 shirami:　　　　　　 射 07/27 18:02 推 onion0350754: 身寸 07/27 18:04 推 tony1688: 穴 穴 07/27 18:10 推 onion0350754:好糟糕～～！萬一＿經真的改成那樣就GJＲＺ！！(啊們 07/27 18:14 --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.127.208.70 ※ 編輯: s25g5d4 來自: 59.127.208.70 (08/27 19:15)