zoukankan      html  css  js  c++  java
  • 解决jq的.animate()函数在IE6下的问题

    最近刚在项目里面花心思捉摸JQ,所以有些心得也及时放上来,理解不足的地方也请教下大家。

    在项目里面实现左的菜单折叠显示的效果,这个在软件界面里是常见的(本来到网上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 {
    	100px;
    	height:500px;
    	background:#060;
    	float:left;
    }
    #butid {
    	10px;
    	height:500px;
    	background:#C00;
    	float: left;
    }
    .content {
    	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', '600px'}, "slow");
    				$('.left').animate({ '0px'}, "slow");
    				i = 2;
    			}else{
    				$('.content').animate({left: '0px', '500px'}, "slow");
    				$('.left').animate({ '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,爱死博客园了,哈哈^^!

  • 相关阅读:
    树莓派.安装Firefox浏览器
    树莓派.Raspberry Pi 3碰到"Unable to determine hardware version. I see: Hardware : BCM2835"错误的解决过程
    Linux.Centos6编译安装nginx
    树莓派.桌面分辨率设置
    [转]树莓派.设置自动重连WiFi
    树莓派.系统.官方下载中NOOBS和Raspbian的区别
    树莓派.设置无线网卡为AP工作模式(pi2和pi3)
    Nodejs.调用Linux命令
    树莓派.屏幕休眠控制
    GO语言.树莓派.环境安装和测试
  • 原文地址:https://www.cnblogs.com/mofish/p/1895739.html
Copyright © 2011-2022 走看看