我正在尝试为一些以象限格式布局的 html 元素创建动画。单击每个 div 时,我希望它们扩展到容器高度和宽度的 100%,然后再次单击时折叠回其初始大小。这是一个类似于浏览器最大化和折叠回原始大小的动画。
我目前的工作正常,我只是希望动画不会将其他元素推离屏幕,并且当标题消失时它也不会跳转。
我该怎么做?随意使用 jQuery 动画或 css3 动画。谢谢!
这是我目前拥有的演示:JSFIDDLE Javascript
$(document).ready(function () {
$('.box1').on('click', function() {
$(this).animate({height: "100%", width: "100%"}, 500);
});
});
HTML
<div id="page-wrapper">
<div class="header"></div>
<div class="box-container clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
CSS
#page-wrapper {
width: 400px;
height: 480px;
border: 1px solid lightblue;
}
.box-container {
width: 100%;
height: 100%;
}
.header {
background: black;
height: 40px;
width: 100%;
}
.box1{
background: yellow;
height: 190px;
width: 170px;
margin: 10px;
float: left;
}
.box2 {
background: red;
height: 190px;
width: 180px;
margin: 10px;
float: right;
}
.box3 {
background: green;
height: 190px;
width: 170px;
margin: 10px;
float: left;
}
.box4 {
background: blue;
height: 190px;
width: 180px;
float: right;
margin: 10px;
}
最佳答案
到目前为止,我已经有了这个,它有点乱,还没有动画,但我的动画是裸露的,我会很快发布一个动画编辑。
jQuery
$(document).ready(function () {
var full = 0;
var thisBox;
var d = {};
var speed = 900;
$('.box').on('click', function() {
thisBox = $(this);
console.log($(thisBox)[0]);
if(full === 0){
$('.box').each(function(){
if($(this)[0] != $(thisBox)[0]){
$(this).fadeOut(1);
}
});
d.width = "100%";
d.height = "100%";
$(this).animate(d,speed,function(){
$(this).css("top","0px");
$(this).css("left","0px");
$(this).css("margin-left","0px");
$(this).css("margin-top","0px");
$(this).css("position","absolute");
});
full = 1;
}
else{
d.width = "170px";
d.height = "190px";
$(this).css("position","");
$(this).css("margin-left","10px");
$(this).css("margin-top","10px");
$(this).animate(d,speed,function(){
$('.box').each(function(){
if($(this)[0] != $(thisBox)[0]){
$(this).fadeIn("fast");
}
}); });
full = 0;
}
});
});
我还更改了 html 以使每个框都具有 .box
类。
关于jquery - 用于将 div 扩展到屏幕的 100% 的 Css/jQuery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24718247/