解决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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
javascript类型转换示例
Apr 29 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
Vue 实现拨打电话操作
Nov 16 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
php xfocus防注入资料
2008/04/27 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
基于vue实现分页效果
2017/11/06 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
解释一下Windows的消息机制
2014/01/30 面试题
最新教师自我评价分享
2013/11/12 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
升职演讲稿范文
2014/05/23 职场文书
工程安全生产协议书
2014/11/21 职场文书
2014年个人年终总结
2015/03/09 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏