A css+jquery implementation of zooming and shrinking animation effect _jquery

Today, I wrote some code for my friend, I think I wrote it, several versions later, a little satisfied, so I posted it.

It's all set to die. Because the requirement is only 4 elements. If you want to use CSS class to deal with, then need to use the CSS3 animation.

Function: On the top of the button on the slide, you can switch each page, click on the bottom of each page, you can also toggle the contraction or expansion of the state.

Initial effect Preview

Copy Code code as follows:

<! DOCTYPE html>
<title> css+jquery Animation effect </title>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "anchor" >
<style>
body{
z-index:0;
width:100%;
min-height:400px;
}
. pages{
Position:absolute;
}
. current{
Position:absolute;
Z-index:12!important;
left:0px!important;
}
. page1{
Background-color: #a5cfff;
Z-index:1;
width:300px;
height:280px;
top:100px;
left:0px;
}
. page2{
Background-color: #b1ca54;
Z-index:2;
width:250px;
height:270px;
top:160px;
left:0px;
}
. page3{
Background-color: #c2c6c9;
Z-index:3;
width:200px;
height:260px;
top:220px;
left:0px;
}
. page4{
Background-color: #ef9e9c;
Z-index:4;
width:150px;
height:250px;
top:250px;
left:0px;
}
</style>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script>
$ (function () {
Growth
function Increase ($div, E) {
var expstatus = $div. Data ("Expstatus");
if (!expstatus) {
Not unfolded.
$div. Data ("Expstatus", "yes");
}
var style = $div. attr ("style");
$div. addclass ("current"). attr ("Styleold", style);
//
$div. Stop ();
$div. Animate ({
opacity:0.9,
Width: "400px",
Height: "400px",
Top: "100px",
Left: "0px"
},600)
. Animate ({
opacity:1.0
},30);

E.stoppropagation ();
return false;
};
Restores
function Resize (e) {
All of them removed.
var $page 1 = $ (". Current.page1");
$page 1.stop ();
$page 1.animate ({
opacity:1.0,
Width: "300px",
Height: "280px",
Top: "100px",
Left: "0px"
},600,null,function () {
$page 1.removeClass ("current"). attr ("Style", "");
});

var $page 2 = $ (". Current.page2");
$page 2.stop ();
$page 2.animate ({
opacity:1.0,
Width: "250px",
Height: "270px",
Top: "160px",
Left: "0px"
},600,null,function () {
$page 2.removeClass ("current"). attr ("Style", "");
});

var $page 3 = $ (". Current.page3");
$page 3.stop ();
$page 3.animate ({
opacity:1.0,
Width: "200px",
Height: "260px",
Top: "220px",
Left: "0px"
},600,null,function () {
$page 3.removeClass ("current"). attr ("Style", "");
});

var $page 4 = $ (". Current.page4");
$page 4.stop ();
$page 4.animate ({
opacity:1.0,
Width: "150px",
Height: "250px",
Top: "250px",
Left: "0px"
},600,null,function () {
$page 4.removeClass ("current"). attr ("Style", "");
});
//

var expstatus1 = $page 1.data ("Expstatus");
if (EXPSTATUS1) {
$page 1.data ("Expstatus", null);
}
var expstatus2 = $page 2.data ("Expstatus");
if (EXPSTATUS2) {
$page 2.data ("Expstatus", null);
}
var Expstatus3 = $page 3.data ("Expstatus");
if (EXPSTATUS3) {
$page 3.data ("Expstatus", null);
}
var EXPSTATUS4 = $page 4.data ("Expstatus");
if (EXPSTATUS4) {
$page 4.data ("Expstatus", null);
}

if (e) {
E.stoppropagation ();
return false;
} else {
return true;
}
};
//
$ ("#button1"). Unbind ("MouseOver"). Bind ("MouseOver", function (e) {
//
var $page 1 = $ (". Page1");
Add a specific
return increase ($page 1,e);

}). Unbind ("Mouseout"). Bind ("Mouseout", function (e) {
Return resize (e);

});
//
$ ("#button2"). Unbind ("MouseOver"). Bind ("MouseOver", function (e) {
//
var $page 2 = $ (". Page2");
Add a specific
return increase ($page 2,e);

}). Unbind ("Mouseout"). Bind ("Mouseout", function (e) {
Return resize (e);
});
//
$ ("#button3"). Unbind ("MouseOver"). Bind ("MouseOver", function (e) {
//
var $page 3 = $ (". Page3");
Add a specific
return increase ($page 3,e);

}). Unbind ("Mouseout"). Bind ("Mouseout", function (e) {
Return resize (e);
});
//
$ ("#button4"). Unbind ("MouseOver"). Bind ("MouseOver", function (e) {
//
var $page 4 = $ (". Page4");
Add a specific
return increase ($page 4,e);

}). Unbind ("Mouseout"). Bind ("Mouseout", function (e) {
Return resize (e);
});

//
$ (". Pages"). Unbind ("MouseOver"). Bind ("MouseOver", function (e) {
//
var $this = $ (this);
Add a specific
return increase ($this, E);
}). Unbind ("Mouseout"). Bind ("Mouseout", function (e) {
All of them removed.
Return resize (e);
});
of the new
$ (". Pages"). Unbind ("click Touchstart"). Bind ("Click Touchstart", Function (e) {
//
var $this = $ (this);
var expstatus = $this. Data ("Expstatus");
if (!expstatus) {
Not unfolded.
//
return increase ($this, E);
} else {
Return resize (e);
}
});
//
$ ("Body"). Click (function (e) {
All of them removed.
Return resize (null);
});
});
</script>

<body>
<div class= "pages Page1" >page1</div>
<div class= "pages Page2" >page2</div>
<div class= "pages Page3" >page3</div>
<div class= "pages Page4" >page4</div>

<div style= "Background-color: #a5cfff;" >
<button id= "Button1" > First page </button>
<button id= "button2" > 2nd page </button>
<button id= "Button3" > 3rd page </button>
<button id= "Button4" > 4th page </button>
</div>
</body>