Demo Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Test </title> <style type=" Text/css "> divcss{bottom:0; Display:block; height:25px; Overflow:hidden; padding:0; position:fixed; right:20px; }. contentcss{background: #666; height:200px; width:200px; }. contentcssheight{}. titlecss{width:200px; height:25px; line-height:25px; Text-align:right; margin:0px; Background: #999999; } #close {cursor:pointer; } </style> <script language= "javascript" type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/" Jquery/1.4/jquery.min.js "></script> <script language=" javascript "type=" Text/javascript "> $ ( function () {//Header layer Height--prompts to turn on or off Var titheight=$ ("#ditTitle"). Height (); The height of the content layer var conheight=$ ("#divContent"). Height (); Turn on or off $ ("#close"). Toggle (function () {//change hint $ ("#close"). Text ("Off"); Animation-the message layer height increases in a second, and top adds $ ("#msgDiv"). Animate ({height:titheight+conheight},1000,function () {//expanded function}); },function () {//Change the hint $ ("#close"). Text ("open"); Alert (temp+ "" +titheight); $ ("#msgDiv"). Animate ({height:titheight},1000,function () {//functions executed after shutdown}); })//execute VAR mytimer,i=8; function Starfun () {//triggers the Click event to display if (i==4) {$ ("#close"). Click (); //Clear timeout, trigger Click event, close layer if (i==0) {window.cleartimeout (MyTimer); if ($ ("#close"). Text ()!= "open" $ ("#close"). Click (); } mytimer=window.settimeout (starfun,1000); I=i-1; } starfun ()}); </script> </pead> <body> <div > Test div</div> <div id= "Msgdiv" class= "Divcss" > &L T;div id= "Dittitle" class= "Contentcssheight titlecss" > <span id= "Close" > Open </span></div> <div Id= "Divcontent" class= "Contentcss" > This is some test content </div> </div> <div > Test div</div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Core code:
Copy Code code as follows:
$ (function () {
Height of the title layer--prompts to turn on or off
var titheight=$ ("#ditTitle"). Height ();
The height of the content layer
var conheight=$ ("#divContent"). Height ();
Turn on or off
$ ("#close"). Toggle (function () {
Change Tips
$ ("#close"). Text ("Off");
Animation--A second message layer height increase, top increase
$ ("#msgDiv"). Animate ({height:titheight+conheight},1000,function () {
function to execute after expansion
});
},function () {
Change Tips
$ ("#close"). Text ("open");
Alert (temp+ "" +titheight);
$ ("#msgDiv"). Animate ({height:titheight},1000,function () {
Functions that are executed after the shutdown
});
})
Perform
var mytimer,i=8;
function Starfun ()
{
Triggers the Click event to display
if (i==4)
{
$ ("#close"). Click ();
}
Clear timeout, trigger Click event, close layer
if (i==0)
{
Window.cleartimeout (MyTimer);
if ($ ("#close"). Text ()!= "open"
$ ("#close"). Click ();
}
Mytimer=window.settimeout (starfun,1000);
I=i-1;
}
Starfun ()
});
After testing IE6 can not run, in view of the current use of IE6 Chinese users are more, we suggest that we learn, not recommended.
