解决jquery的.animate()函数在IE6下的问题

在项目里面实现左的菜单折叠显示的效果，这个在软件界面里是常见的（本来到网上copy一段代码也就了事了，估计写的比我都好，但学习嘛，就要有学习的精神^^!）, 我是用.animate()去实现隐藏展开的，代码如下：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style>  </style> </head> <body> <script type="text/javascript" src="thirdparty/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ var i = 1;//设置状态判断 $('#butid').click(function(){ if(i == 1){ $('.content').animate({left: '-=100px',width: '600px'}, "slow"); $('.left').animate({width: '0px'}, "slow"); i = 2; }else{ $('.content').animate({left: '0px',width: '500px'}, "slow"); $('.left').animate({width: '100px'}, "slow");//fadeOut() i = 1; } }); }); </script> <div class="left">123</div> <div id="butid"></div> <div class="content">123</div> </body> </html> 如果这样子的话，在FF，IE7-8，chrome下执行是正常的。可是IE6下无法隐藏left，原因是因为ie6默认内容高宽度超出时，DIV会自动撑开。所以只要给.left{}加个overflow:hidden，问题也就解决~~ PS：本来早上是写个函数把.left里面的内容隐藏掉的，在写博文的时候突然想通了这个原理，还以为是.animate()在IE6下有BUG

　　推荐阅读

　　javascript 静态树菜单实现代码

谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！ .expand{ cursor:pointer; } .hide{ cursor:pointer; } 定义列>>>详细阅读

本文标题：解决jquery的.animate()函数在IE6下的问题

地址：http://www.17bianji.com/kaifa2/JS/25270.html

1/2 1