The following code is a reference for anyone learning jquery.
Html code:
Code
Copy codeThe Code is as follows:
<Div class = "warp" id = "warp">
</Div>
Javascript:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var $ warp = $ ("# warp ");
$ Warp. IsRunning = false;
Var seconds = 500;
$ Warp. children ("img"). click (function (){
If ($ warp. IsRunning) {return ;}
$ Warp. IsRunning = true;
Var $ imgs = $ ("# warp"). children ("img ");
Export imgs.eq(2).css ("marginTop", "63px"). animate ({marginTop: "0px" },{ duration: seconds });
Required imgs.eq(0).css ({position: "absolute", opacity: "0.5 "}). animate ({width: "pixel PX", height: "57px", left: "372px", top: "126px", opacity: "1" },{ duration: seconds });
// Define imgs.eq(1).css ({position: "absolute", left: "372px", top: "6px", opacity: "0.2 "});
Required imgs.eq(1).css ({position: "absolute", left: "372px", top: "6px", opacity: "0.2", clear: "none "}). animate ({width: "360px", height: "pixel PX", left: "-9px", top: "-5px", opacity: "1" },{ duration: seconds, complete: function (){
$ Imgs. eq (0). appendTo ($ ("# warp "));
$ Imgs. eq (0). removeAttr ("style"). removeClass ("imgBig"). addClass ("imgLittle ");
$ Imgs. eq (1). removeAttr ("style"). removeClass ("imgLittle"). addClass ("imgBig ");
$ Warp. IsRunning = false;
}});
});
});
Css code:
Copy codeThe Code is as follows:
. Warp {width: pixel PX; height: 194px; overflow: hidden; border: solid 1px # ccc; position: relative; top: 0px; left: 0px; background-color: # fafafa}
. Warp img {border-width: 0px; cursor: pointer; position: relative; top: 0px; left: 0px}
. ImgBig {float: left; width: 360px; height: pixel PX; padding: 2px ;}
. ImgLittle {float: right; width: pixel PX; height: 57px; padding: 6px 5px 0 10px; clear: right}