jquery callback在firefox的bug

win8 acer官網的教學網頁是我負責前端動態製作,
製作初期我記得還特別詢問是否要測試全瀏覽器,

結果得到的回覆是只要ie8以上跟chrome就可以了!?

好啦,
結果做完了明天(2012/10/26)就要跟全球win8上線了,
昨天被告知用firefox觀看選單會被蓋住跑版,


我本來心想不過就是跑版,
調調位置或圖層順序不就好了,
結果一看不妙,

好像是遇上bug,

測了全部的瀏覽器,
ie,safari,chrome,
全部都能正常跑,
頂多只是位置稍微誤差幾px,

用firebug觀察,
強制把選單寬度縮小去看點選後的第二層狀態,
乖乖隆低咚,
第二層的參數根本沒代進去@@

這下覺得有點麻煩了,

昨晚回家花了一個小時稍微測了一下逐一排除原因後
發現問題似乎出在animate完成後的callback在firefox下根本沒有被觸發@@

google了國內外論譚似乎也沒有人遇到過類似問題,
簡單做了個小sample在firefox也一樣觸發不了callback,
但在ie,safari,chrome都很正常
這樣感覺範圍縮小不少了,
剛剛最後試完得出結論,
firefox下callback的function一定要寫完整才會抓到,
我都習慣用flash延用下來的只寫function名字的方式,
這在ie,safari,chrome都很正常,
偏偏firefox就是不吃@@

結論

範例
function subMenuShow(){
}
$(".leftMenu").stop().animate({width:40},600,"easeOutExpo",subMenuShow);
紅字部份是我一直以來的習慣,
在ie,safari,chrome可以正常運作
但在firefox下會有問題
要改成以下
$(".leftMenu").stop().animate({width:40},600,"easeOutExpo",function(){subMenuShow()});

加入藍色字的部份,
意思就是其實要把整個function()放進callback,
firefox才會執行就對了,
這樣感覺firefox真是笨死了...
別家瀏覽器都可以直接叫名字就呼叫....

雖然說jquery原本的官方說明就是把所有的動態直接放在callback裡
但把全部的動態直接放進callback就不能共用了
才會另外把它提出來做成一個組件的function...
一直以來都能正常使用的,
看來以後為了Firefox習慣要改一改了@@