A CSS+jQuery zoom in and zoom out animation effect

2020-03-30 01:46:45
OfStack

Today, I helped my friend to write some code, I feel like writing, after several versions, a little satisfied, so I posted it.

It's all doomed. Because the requirements only have four elements. If you want to use CSS classes, then you need to use CSS3 animation.

Function: slide on the top button, you can switch between pages, click on the bottom of each page, you can also switch between the state of contraction or expansion.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201402/201402191630062.gif? 2014119163025 ">
Initial preview

 
<!DOCTYPE html> 
<html> 
<head> 
<title> CSS+jQuery Animation effects  </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=" An 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 expanded
$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; 
}; 
//  reduction  
function resize(e){ 
//All removed
var $page1 = $(".current.page1") ; 
$page1.stop(); 
$page1.animate({ 
opacity:1.0, 
width:"300px", 
height: "280px", 
top: "100px", 
left: "0px" 
},600,null,function(){ 
$page1.removeClass("current").attr("style",""); 
}); 

var $page2 = $(".current.page2") ; 
$page2.stop(); 
$page2.animate({ 
opacity:1.0, 
width:"250px", 
height: "270px", 
top: "160px", 
left: "0px" 
},600,null,function(){ 
$page2.removeClass("current").attr("style",""); 
}); 

var $page3 = $(".current.page3") ; 
$page3.stop(); 
$page3.animate({ 
opacity:1.0, 
width:"200px", 
height: "260px", 
top: "220px", 
left: "0px" 
},600,null,function(){ 
$page3.removeClass("current").attr("style",""); 
}); 

var $page4 = $(".current.page4") ; 
$page4.stop(); 
$page4.animate({ 
opacity:1.0, 
width:"150px", 
height: "250px", 
top: "250px", 
left: "0px" 
},600,null,function(){ 
$page4.removeClass("current").attr("style",""); 
}); 
// 

var expstatus1 = $page1.data("expstatus"); 
if(expstatus1){ 
$page1.data("expstatus",null); 
} 
var expstatus2 = $page2.data("expstatus"); 
if(expstatus2){ 
$page2.data("expstatus",null); 
} 
var expstatus3 = $page3.data("expstatus"); 
if(expstatus3){ 
$page3.data("expstatus",null); 
} 
var expstatus4 = $page4.data("expstatus"); 
if(expstatus4){ 
$page4.data("expstatus",null); 
} 

if(e){ 
e.stopPropagation(); 
return false; 
} else { 
return true; 
} 
}; 
// 
$("#button1").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page1 = $(".page1"); 
//Add specific
return increase($page1,e); 

}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 

}); 
// 
$("#button2").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page2 = $(".page2"); 
//Add specific
return increase($page2,e); 

}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$("#button3").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page3 = $(".page3"); 
//Add specific
return increase($page3,e); 

}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 
// 
$("#button4").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $page4 = $(".page4"); 
//Add specific
return increase($page4,e); 

}).unbind("mouseout").bind("mouseout",function(e){ 
return resize(e); 
}); 

// 
$(".pages").unbind("mouseover").bind("mouseover",function(e){ 
// 
var $this = $(this); 
//Add specific
//return increase($this,e); 
}).unbind("mouseout").bind("mouseout",function(e){ 
//All removed
//return resize(e); 
}); 
//  The new  
$(".pages").unbind("click touchstart").bind("click touchstart",function(e){ 
// 
var $this = $(this); 
var expstatus = $this.data("expstatus"); 
if(!expstatus){ 
//Not expanded
// 
return increase($this,e); 
} else { 
return resize(e); 
} 
}); 
// 
$("body").click(function(e){ 
//All removed
return resize(null); 
}); 
}); 
</script> 
</head> 

<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"> The first page </button> 
<button id="button2"> The first 2 page </button> 
<button id="button3"> The first 3 page </button> 
<button id="button4"> The first 4 page </button> 
</div> 
</body> 
</html>