解决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 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
基于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
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php常用表单验证类用法实例
2015/06/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
利用Python实现颜色色值转换的小工具
2016/10/27 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Pandas的数据过滤实现
2021/01/15 Python
自动化专业个人求职信范文
2013/12/30 职场文书
顶碗少年教学反思
2014/02/21 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
高考升学宴答谢词
2015/01/20 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
优秀大学生申请书
2019/06/24 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL