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.
<! 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 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", "");
});
E.stoppropagation ();
return false;
};
//
$ ("#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);
});
//
$ ("Body"). Click (function (e) {
All of them removed.
Return resize (e);
});
});
</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>
