A zoom-in animation effect implemented by CSS jQuery_jquery

I helped a friend write some code today. I felt that I was writing it down. After several versions, I was a little satisfied, so I posted it.
They are all doomed. Because there are only 4 elements required. If you want to use CSS classes to handle it, you need to use CSS3 animation.

Copy code The code is as follows:

<script> <br>$(function(){ <br>// 增长 <br>function increase($div,e){ <br>var style = $div.attr("style"); <br>$div.addClass("current").attr("styleold",style); <br>// <br>$div.stop(); <br>$div.animate({ <br>opacity:0.9, <br>width:"400px", <br>height: "400px", <br>top: "100px", <br>left: "0px" <br>},600) <br>.animate({ <br>opacity:1.0 <br>},30); <br><br>e.stopPropagation(); <br>return false; <br>}; <br>// 还原 <br>function resize(e){ <br>// 所有的都移除 <br>var $page1 = $(".current.page1") ; <br>$page1.stop(); <br>$page1.animate({ <br>opacity:1.0, <br>width:"300px", <br>height: "280px", <br>top: "100px", <br>left: "0px" <br>},600,null,function(){ <br>$page1.removeClass("current").attr("style",""); <br>}); <br><br>var $page2 = $(".current.page2") ; <br>$page2.stop(); <br>$page2.animate({ <br>opacity:1.0, <br>width:"250px", <br>height: "270px", <br>top: "160px", <br>left: "0px" <br>},600,null,function(){ <br>$page2.removeClass("current").attr("style",""); <br>}); <br><br>var $page3 = $(".current.page3") ; <br>$page3.stop(); <br>$page3.animate({ <br>opacity:1.0, <br>width:"200px", <br>height: "260px", <br>top: "220px", <br>left: "0px" <br>},600,null,function(){ <br>$page3.removeClass("current").attr("style",""); <br>}); <br><br>var $page4 = $(".current.page4") ; <br>$page4.stop(); <br>$page4.animate({ <br>opacity:1.0, <br>width:"150px", <br>height: "250px", <br>top: "250px", <br>left: "0px" <br>},600,null,function(){ <br>$page4.removeClass("current").attr("style",""); <br>}); <br><br>e.stopPropagation(); <br>return false; <br>}; <br>// <br>$("#button1").unbind("mouseover").bind("mouseover",function(e){ <br>// <br>var $page1 = $(".page1"); <br>// 添加特定的 <br>return increase($page1,e); <br><br>}).unbind("mouseout").bind("mouseout",function(e){ <br>return resize(e); <br><br>}); <br>// <br>$("#button2").unbind("mouseover").bind("mouseover",function(e){ <br>// <br>var $page2 = $(".page2"); <br>// 添加特定的 <br>return increase($page2,e); <br><br>}).unbind("mouseout").bind("mouseout",function(e){ <br>return resize(e); <br>}); <br>// <br>$("#button3").unbind("mouseover").bind("mouseover",function(e){ <br>// <br>var $page3 = $(".page3"); <br>// 添加特定的 <br>return increase($page3,e); <br><br>}).unbind("mouseout").bind("mouseout",function(e){ <br>return resize(e); <br>}); <br>// <br>$("#button4").unbind("mouseover").bind("mouseover",function(e){ <br>// <br>var $page4 = $(".page4"); <br>// 添加特定的 <br>return increase($page4,e); <br><br>}).unbind("mouseout").bind("mouseout",function(e){ <br>return resize(e); <br>}); <br><br>// <br>$(".pages").unbind("mouseover").bind("mouseover",function(e){ <br>// <br>var $this = $(this); <br>// 添加特定的 <br>return increase($this,e); <br>}).unbind("mouseout").bind("mouseout",function(e){ <br>// 所有的都移除 <br>return resize(e); <br>}); <br>// <br>$("body").click(function(e){ <br>// 所有的都移除 <br>return resize(e); <br>}); <br>}); <br></script>

page1

page2

page3

page4

第一页
第2页
第3页
第4页