In the project to achieve the left of the menu folding display effect, this is common in the software interface (originally to the online copy a piece of code is also the case, it is estimated to write better than I do, but learning, you must have the spirit of learning ^^!),
I use. Animate () to implement the hidden expansion, the code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </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>
<body>
<script type= "Text/javascript" src= "Thirdparty/jquery/jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var i = 1;//setting state judgment
$ (' #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>
If this is the case, it is normal to perform under Ff,ie7-8,chrome. But IE6 can not hide left because the IE6 default content is higher than the width, the div will automatically open. So just give the. left{} Add a Overflow:hidden, the problem will be solved ~ ~
PS: Originally in the morning to write a function to hide the contents of the left, in the writing blog when suddenly figured out this principle, thought it was. Animate () bug in IE6
