作者kerash (Fly機飛阿飛)
看板Ajax
標題[問題] Jquery 特效問題
時間Wed Aug 3 10:12:02 2011
各位前輩大家好，我是最近在摸jquery的新手
目前我遇到一個使用淡入淡出特效的問題
CODE:
js部分是
--------------------------------------
<script type="text/javascript">
$(function () {
$(".categate").fadeTo("fast",0.7);
$(".categate").hover( function() { $(this).fadeTo("fast",1); },
function(){ $(this).fadeTo("fast",0.7); } );
$.each(
$(".categate") ,
function() {
var pos = $(this).attr("trpos");
$(this).click(function(){ $(".sub_cate_"+pos).toggle("slow"); });
}
);
});
</script>
---------------------------------------
html 主要部份
=======================================
<table class="sideBar">
<tr class="categate" trpos="1"><td>123</td></tr>
<tr class="sub_cate_1"><td>sub_1-1</td></tr>
<tr class="sub_cate_1"><td>sub_1-2</td></tr>
<tr class="sub_cate_1"><td>sub_1-3</td></tr>
<tr class="categate" trpos="2"><td>123</td></tr>
<tr class="sub_cate_2"><td>sub_2-1</td></tr>
<tr class="sub_cate_2"><td>sub_2-2</td></tr>
<tr class="sub_cate_2"><td>sub_2-3</td></tr>
</table>
=======================================
因為想自己寫寫看特效，所以沒特別想用別人寫好的語法
可能寫起來不是很好，但是希望指導一下
狀況是：
在 chrome 下可正常執行，但是每次 toggle 後位置都會往下偏移，
到最後可能就跑到很遠的地方了。
在 IE 則是正常執行，只是在 toggle 的過程中，sub 的部份會突然拖很長，
然後再恢復成原本正常的大小，但至少不會偏移
Firefox 稍微修改後算是最正常的。
因為想看變動的狀況，所以有用CSS改變顏色，如果需要的話附在下面:
====================================
<style type="text/css">
.sideBar { width: 150px; }
.categate { background-color:#0C0; color:#FFF; width: 150px; display: block;}
.sub_cate_1 { background-color:#900; color:#0C6; display: none;}
.sub_cate_2 { background-color:#090; color:#C60; display: none;}
</style>
====================================
希望能有比較淺顯的說明讓我了解，非常感謝各位:)
UPDATE : 稍微看了一些英文網站介紹是，似乎在 Jquery 對 table 的 tr,td 這些
運用特效時會有一些錯誤 .. 如果全部改用 div 會不會大費周章啊 ...?
(目前也有測試最基本的 list 方式.. 還在測試 ..)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.250.247.227
1F：→ kerash:categate 的 display: block 拿掉了，因為會有問題.. 08/03 10:20
※ 編輯: kerash 來自: 60.250.247.227 (08/03 10:29)
2F：推 hanhong:我是沒去試你的問題 不過建議少用table 用div, span 08/03 20:02
3F：→ kerash:雖然我也很喜歡用 div span, 但是有些地方我還是選用 table 08/04 09:09
4F：→ kerash:這算是測試而已，我實做是使用 lh , li 來寫，比較OK了 08/04 09:09
5F：→ kerash:但是我寫了一頁商品介紹，在 td 上用 display:block 就死了 08/04 09:10
6F：→ kerash:IE 在相容性跟 css 使用上果然很麻煩... 08/04 09:11
7F：→ kerash:最後決定表格資料類都以 list 作編排 .. 08/04 10:16