jQuery: How to animate a centered div to fill the screen while its still being centered?
I'm trying t开发者_运维问答o animate a div to fill the screen and then return to its original size again. However, when i make the div fill the screen it doesn't animate from the centre, it starts from the top right. Furthermore, when I minimize it, it doesn't return to the starting position but to the top left.
I have the jsfiddle code here. I'm trying to get it to animate smoothly from its starting point at the centre, fill the screen and then backwards to its starting position like in the begining.
I suggest that your moving div has always position: relative;, and contained in a div with position: absolute;, and that he is centered this way
Here is a working example of what you want: http://jsfiddle.net/FP2DZ/.
Another method without the extra div used by pinouchon. jsFiddle is here:
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
d.width = "100%";
d.height = "100%";
isFullscreen = true;
$("h1").slideUp(speed);
}
else{ // MINIMIZATION
d.width = "300px";
d.height = "100px";
isFullscreen = false;
$("h1").slideDown(speed);
}
$("#controls").animate(d,speed);
}
</script>
<style>
#controls{
width:300px;
height:100px;
margin: auto auto auto auto;
}
body, html{
height:100%;
}
</style>
</head>
<body>
<h1 align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="background-color:green;" align="center">
<input type='button' value='fullscreen' onclick='fullscreen();' />
</div>
</body>
</html>
I think this is what you want:
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
d.width = "100%";
d.height="100%";
d.left="0%";
d.top="0%";
d.marginLeft="0px";
$("#controls").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.left="50%";
d.top="50%";
d.marginLeft="-150px";
$("#controls").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
#controls{
width:300px;
height:100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<h1 align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="background-color:green;" align="center">
<input type='button' value='fullscreen' onclick='fullscreen();' />
</div>
</body>
</html>
But I guess I was a bit late ;)
加载中,请稍侯......
精彩评论