解决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 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
js编写简单的计时器功能
Jul 15 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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 Static关键字实用方法
2010/06/04 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery中Form相关知识汇总
2015/01/06 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
关于Python作用域自学总结
2019/06/10 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
广州迈达威.net面试题目
2012/03/10 面试题
一份软件工程师的面试试题
2016/02/01 面试题
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
大学生入党自传2015
2015/06/26 职场文书
获奖感言怎么写
2015/07/31 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB