jquery中关于slideToggle()效果的小问题

我的jsp的静态htm如下：<html>
<head>
<title>历史数据</title>
<script language="javascript" src="lib/jquery.js"></script>
<script language="javascript">$(document).ready(function() {
$("input[@name='chartStyle']").click(function(){
var item = $("input[@name='chartStyle'][@checked]").val();
$('#faq').slideToggle(500);
});
});
</script>
</head><body class="module" onLoad="doLoad(null, '', '2009-08-07 00:00')" scroll="no">
<form onKeyPress="if(enter())doQuery()">
<table class="module" cellspacing="0" cellpadding="0">
<tr>
<td class="bar">
<table class="func" cellpadding="0" cellspacing="0">
<tr>
<td><span class="required">*</span> 数据项</td>
<td colspan="4"><span id="dataitem"><select name="id" class="short">

<option>&lt;您尚未选择数据项&gt;</option>

</select></span><input class="select" title="选择数据项" onclick="doSelectDataItemMulti()" type="button" value=" ... ">
<input id="chart" type="hidden" name="chart" value="TimeChart"></td>
<td><img src="/xzero/style/default/images/separator.gif"></td>
<td>下界</td>
<td><input id="lower" class="text" type="text" name="lower" value="" size="8" maxlength="8"></td>
<td>上界</td>
<td><input id="upper" class="text" type="text" name="upper" value="" size="8" maxlength="8"></td>
<td><img src="/xzero/style/default/images/separator.gif"></td>
<td class="icon" onClick="clickFirst(this)" title="鼠标移上数据点显示提示
(请在数据量较少时使用)"><input type="checkbox" class="check" name="tooltips" value="1"><img src="/xzero/style/default/images/16/tip.gif" width="16" height="16"></td>
</tr>
<tr>
<td><span class="required">*</span> 时间段</td>
<td><input id="time_from" class="datetime" onpropertychange="changeTime()" type="text" name="time_from" value="2009-08-05 09:56" size="16" maxlength="16"><input class="select" title="选择日期/时间" onclick="openCalendar()" type="button" value=" ... ">
至
<input id="time_to" class="datetime" onpropertychange="changeTime()" type="text" name="time_to" value="2009-08-06 09:56" size="16" maxlength="16"><input class="select" title="选择日期/时间" onclick="openCalendar()" type="button" value=" ... "></td>
<td><select id="shortcut" class="select" onchange="doShortcut('2009-08-07 00:00')" name="shortcut">
<option value="2009-08-06 00:00">1天</option>
<option value="2009-08-05 00:00">2天</option>
<option value="2009-08-04 00:00">3天</option>
<option value="2009-07-30 00:00">1周</option>
<option value="2009-07-06 00:00">1月</option>
</select></td>
<td class="icon"><div class="icon" title="前1天" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="doShortcutBack()" nowrap><img class="icon" src="/xzero/style/default/images/16/back.gif" width="16" height="16"> </div></td>
<td class="icon"><div class="icon" title="后1天" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="doShortcutForward()" nowrap><img class="icon" src="/xzero/style/default/images/16/forward.gif" width="16" height="16"> </div></td>
<td><img src="/xzero/style/default/images/separator.gif"></td>
<td>单元</td>
<td><select id="unit" class="select" onchange="doStat(this)" name="unit">
<option value="">最小</option>
<option value="10">10分钟</option>
<option value="60">1小时</option>
<option value="240">4小时</option>
<option value="1440">1天</option>
</select></td>
<td>采样</td>
<td id="standard"><select class="select">
<option value="">标准　</option>
</select></td>
<td id="statistic" style="display:none"><select id="stat" class="select" name="stat">
<option value="avg">均值</option>
<option value="max">最高值</option>
<option value="min">最低值</option>
</select></td>
<td><img src="/xzero/style/default/images/separator.gif"></td>
<td class="icon"><div class="icon" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="doQuery()" nowrap><img class="icon" src="/xzero/style/default/images/16/query.gif" width="16" height="16"> 查询</div></td>
</tr>
<tr >
<td>&nbsp;&nbsp;&nbsp;图表式样</td>
<td>
<input type=radio name=chartStyle value=0 checked>曲线图
<input type=radio name=chartStyle value=1>柱状图
<input type=radio name=chartStyle value=2>饼图
</td>
</tr>
<tr><td><div id="faq"><p>aaaaaa</p><p>bbbbbb</p></div></td></tr>

</table>
</td>
<td class="bar" align="right" valign="bottom">
<table class="func" cellpadding="0" cellspacing="0">
<tr>
<td id="loading" style="display:none" nowrap><img src="/xzero/style/default/images/spinner.gif">&nbsp;<span class="gray">载入中...</span></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
  <tr>
<td height="100%" colspan="2">
<table class="module" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="/xzero/common/default.jsp?%E8%AF%B7%E9%80%89%E6%8B%A9%E6%95%B0%E6%8D%AE%E9%A1%B9%E5%92%8C%E6%9F%A5%E8%AF%A2%E6%97%B6%E9%97%B4" name="list" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe></td>
</tr>
</table>
</td>
</tr>
</body>
</html>
当点击单选框触发slide效果的时候，在下降的时候会卡一下再来下，换成slidedown（）也一样，有谁知道是什么原因？怎么解决？

解决方案 »

  1.   

    你贴的代码本来就不完整，我只能大概猜测一下可能的问题。1，你要加上这个：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2，你的表格设计的一塌糊涂，需要好好整理一下HTML代码。没有宽度，ID为faq的DIV外面的TD还少个colspan="2"。3，faq里面的内容是不是生成的？生成是否使用JS？如果是，错开执行事件。可以先把内容生成好，先隐藏起来，然后根据需要直接调用。4，不知道你是不是无意的，末尾缺少form和table的闭合标签。JS操作页面元素执行动画的时候非常依赖页面的HTML结构，如果一开始结构设计的就是乱糟糟的，你的动画也就会变得乱糟糟。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>历史数据</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript"> 
    $(document).ready(function() {  $("input[name='chartStyle']").each(function(){
    $(this).click(function(){ 
    var item = $("input[name='chartStyle'][checked]").val(); 
    $('#faq').slideToggle(500); 
    }); 
    });
    }); 
    </script>
    </head>
    <body class="module"  scroll="no"><input type=radio name=chartStyle value=0 checked>
          曲线图
          <input type=radio name=chartStyle value=1>
          柱状图
          <input type=radio name=chartStyle value=2>
          饼图 <br/><div id="faq">
    <table width="100%%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
      <p>aaaaaa </p> <p>bbbbbb </p>
        </td>
      </tr>
    </table>
    </div>
    </body>
    </html>
      

  2.   

    最好用1.3.2的jQuery
    在IE下动画会闪一下，效果不理想
    加上DTD定义即可
    比如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">