解決jquery的.animate函數在IE6下的問題
在項目里面實現左的菜單折疊顯示的效果，這個在軟件界面里是常見的（本來到網上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="https://www.questions.com.cn/dnjc/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您可能感興趣的文章:解決jQuery ajax請求在IE6中莫名中斷的問題jQuery解決IE6、7、8不能使用 JSON.stringify 函數的問題jquery fancybox ie6不顯示關閉按鈕的解決辦法jquery submit ie6下失效的原因分析及解決方法關于jquery中動態增加select,事件無效的快速解決方法jQuery:delegate中select()不起作用的解決方法(實例講解)jquery html動態生成select標簽出問題的解決方法jQuery選中select控件 無法設置selected的解決方法jQuery 跨域訪問問題解決方法jquery的ajax()函數傳值中文亂碼解決方法介紹jQuery在ie6下無法設置select選中的解決方法詳解
