The animate () method provides a custom animation that enables a more novel animation effect with a syntax structure:
| The code is as follows |
Copy Code |
$ (Element). Animate ({
Param1:value1,
Param2:value2},
Speed, function () {
/* Stuff to does after animation is complete * *
}); |
Simple Case One:
Click the side to stroke a layer DIV2, click DIV2 to close the layer:
| The code is as follows |
Copy Code |
|
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>untitled</title>
<meta name= "viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; " >
<meta name= "format-detection" content= "Telephone=no" >
<style>
*{padding:0;margin:0;}
. wrap{width:100%;height:500px;overflow:hidden;position:relative;}
. Wrap. Left{background-color: #000; color: #fff; height:500px;width:100%;}
. Wrap. Right{background-color: #888; color: #fff; height:500px;width:100%;p osition:absolute;top:0;right:-100%;}
</style>
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script>
$ (function () {
$ ('. Left '). Click (function () {
if (!$ ('. Right '). Is (": Animated")) {//Determine if the element is animated, prevent multiple clicks during animation to cause the element's right property to accumulate
$ ('. Right '). Animate ({
Right: "+=100%"},
300);
};
$ (this). Unbind (' click ');
});
$ ('. Right '). Click (function () {
if (!$ (this). Is (": Animated")) {
$ (this). Animate ({
Right: "-=100%"},
300);
}
});
})
</script>
<body>
<div class= "Wrap" >
<div class= "Left" > Left-Hand </div>
<div class= "Right" > Right-hand </div>
</div>
</body>
|
Simple case two: return to the top or bottom
| The code is as follows |
Copy Code |
|
<script type= "Text/javascript"
$ (document). Ready (function () {
//Scroll page To the bottom
$ (' A.scrolltobottom '). Click (function () {
$ (' html, Body '). Animate ({
ScrollTop: $ (document). Height ()
}, 300);
return false;
});
//Scroll page to "Top
$ (' A.scrolltotop '). Click (function () {
$ (' html, Body '). Animate ({
scrolltop:0
}, ' slow ');
return false;
});
})
</script> |
