作者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