当前位置：首页 → 问答吧 → JQuery动画没有效果

JQuery动画没有效果

时间：2010-04-24

来源：互联网

复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>收缩展开效果</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$("#101").click(function(){
$("#100").slideToggle("slow")
})
});
</script>
<h1 id='101'>收缩展开效果</h1>
<table id='100' class="box" border='1'>
<tr>
<td>第一章</td><td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

我这样写为什么没有动画的过度效果?

作者: belor 发布时间: 2010-04-24

table初始时候应该是display:none的吧

作者: jokeykiss 发布时间: 2010-04-29

我试了一下确实没什么效果，看其他办法是否可行
1、改用toggle()有效果；
2、把table放在一个div内，对<div id="100"></div>进行操作也有效果

作者: apple20001201 发布时间: 2010-05-06

肯定是可以的，为什么你的没效果是因为你没有声明doc，不信你在文档头加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">试试看
，用jquery最好要声明doctype的，还有最好代码写的规范点，位置啊，相应的标记啊，写全点

作者: ywqbestever 发布时间: 2010-05-06

JQuery动画没有效果

热门阅读

热门下载