CSS jQuery_jquery로 구현된 확대 애니메이션 효과

오늘 친구의 코드 작성을 도와줬는데, 여러 버전을 써본 후 조금 만족스러워서 포스팅하게 되었습니다.
모두 멸망했습니다. 왜냐하면 필요한 요소는 4개뿐이기 때문입니다. CSS 클래스를 사용하여 처리하려면 CSS3 애니메이션을 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

<머리>
<제목> CSS jQuery动画效果


<스타일>
본문{
z-색인: 0;
너비: 100%;
최소 높이: 400px;
}
.pages{
위치: 절대;
}
.current{
위치: 절대;
z-색인: 12 !중요;
왼쪽: 0px !중요;
}
.page1{
배경색: #a5cfff;
z-색인: 1;
너비: 300px;
높이:280px;
상단: 100px;
왼쪽: 0px;
}
.page2{
배경색: #b1ca54;
z-색인: 2;
너비: 250px;
높이:270px;
상단: 160px;
왼쪽: 0px;
}
.page3{
배경색: #c2c6c9;
z-색인: 3;
너비: 200px;
높이:260px;
상단: 220px;
왼쪽: 0px;
}
.page4{
배경색: #ef9e9c;
z-색인: 4;
너비: 150px;
높이:250px;
상단: 250px;
왼쪽: 0px;
}


<스크립트>
$(function(){
// 增长
function 증가($div,e){
var style = $div.attr("style");
$div.addClass ("현재").attr("styleold",style);
//
$div.stop()
$div.animate({
불투명도:0.9,
너비 :"400px",
높이: "400px",
상단: "100px",
왼쪽: "0px"
},600)
.animate({
불투명도: 1.0
},30);

e.stopPropagation();
return false
} // 所有的と移除
var $page1 = $(".current.page1")
$page1.stop()
$page1.animate({
opacity:1.0,
너비:"300px",
높이: "280px",
상단: "100px",
왼쪽: "0px"
},600,null,function(){
$page1.removeClass("current").attr("style","");
})

var $page2 = $(".current.page2")
$page2.stop();
$page2.animate({
불투명도:1.0,
너비:"250px",
높이: "270px",
상단: "160px",
왼쪽: "0px"
},600,null,function(){
$page2.removeClass("current").attr("style","")
});

var $page3 = $(".current.page3") ;
$page3.stop()
$page3.animate({
불투명도:1.0,
너비 :"200px",
높이: "260px",
상단: "220px",
왼쪽: "0px"
},600,null,function(){
$page3. RemoveClass("현재").attr("스타일","");
});

var $page4 = $(".current.page4") ;
$page4.stop();
$page4.animate({
불투명도:1.0,
너비:"150px",
높이: "250px",
상단: "250px",
왼쪽: "0px "
},600,null,function(){
$page4.removeClass("current").attr("style","");
});

e.stopPropagation();
거짓을 반환합니다.
};
//
$("#button1").unbind("mouseover").bind("mouseover",function(e){
//
var $page1 = $(". page1");
// 添加特定的
수익률 증가($page1,e);

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

});
//
$("#button2").unbind("mouseover").bind("mouseover",function(e){
//
var $page2 = $(". page2");
// 添加特定的
수익률 증가($page2,e);

}).unbind("mouseout").bind("mouseout",function(e) {
resize resize(e)
});
//
$("#button3").unbind("mouseover").bind("mouseover",function(e){
//
var $page3 = $(". page3");
// 添加特定的
수익률 증가($page3,e);

}).unbind("mouseout").bind("mouseout",function(e) {
resize resize(e)
});
//
$("#button4").unbind("mouseover").bind("mouseover",function(e){
//
var $page4 = $(". page4");
// 添加特定的
수익률 증가($page4,e);

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

//
$(".pages").unbind("mouseover").bind("mouseover",function(e){
//
var $this = $ (this);// 添加특정
return 증가($this,e)
}).unbind("mouseout").bind("mouseout",function(e){
// 所有的city移除
resize resize(e)
}); });



<본문>

page1

page2

page3

page4

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