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


Posted in Javascript onDecember 03, 2010

在项目里面实现左的菜单折叠显示的效果,这个在软件界面里是常见的(本来到网上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> 
<!-- 
.left { 
width:100px; 
height:500px; 
background:#060; 
float:left; 
} 
#butid { 
width:10px; 
height:500px; 
background:#C00; 
float: left; 
} 
.content { 
width:500px; 
height:500px; 
background:#000; 
float:left; 
color: #FFF 
} 
--> 
</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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
用jquery来定位
Feb 20 Javascript
Js四则运算函数代码
Jul 21 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
react redux入门示例
Apr 19 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
jquery实现轮播图特效
Apr 12 jQuery
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
基于jQuery的左右滚动实现代码
Dec 03 #Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 #Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 #Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 #Javascript
浅析jQuery的链式调用之each函数
Dec 03 #Javascript
jQuery的链式调用浅析
Dec 03 #Javascript
加速IE的Javascript document输出的方法
Dec 02 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
Python实现KNN邻近算法
2021/01/28 Python
简单了解django缓存方式及配置
2019/07/19 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
个人贷款承诺书
2014/03/28 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
连带责任保证书
2014/04/29 职场文书
大一新生期末自我评价
2014/09/12 职场文书
党纪处分决定书
2015/06/24 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js