gpt4 book ai didi

Jquery动画从右下角到

转载 作者:太空宇宙 更新时间:2023-11-04 16:24:50 26 4
gpt4 key购买 nike

我正在使用 jquery 和 css 开发 UI。我正在尝试使用 jQuery animate 为导航构建一个页面。我现在拥有的是页面中的四个图 block 。我能够增加顶部两个图 block 的高度和宽度,以便它占据整个父 div。但是我无法对底部的两个 DIV 执行相同的操作。

我尝试了很多方法,但问题是我可以对顶部的两个 DIV 使用左浮动和右浮动,但我不能对底部的两个 DIV 执行相同的操作。我不知道底部用什么两个 DIV。

我想要的是一种如图所示的动画,让Child3和Child4从他们的位置展开,通过从他们的位置展开来占据父DIV的全部高度和宽度。

Animation of Bottom Right Div

Animation of Bottom Left Div

我现在做的就是我在用

$("child1").animate({"height":someheight,"width":somewidth},500);

我根据 div 的当前高度增加和减少高度和宽度,以便它具有放大和缩小效果。

我附上了 JS Fiddle:http://jsfiddle.net/uxuzfq5x/对于顶部的两个 DIV,我想为底部的两个 DIV 实现上述内容。

我是 jQuery 的新手,如果我犯了任何错误,请纠正我。

提前致谢。

最佳答案

使用 jQuery 尝试这样的事情 animate() 方法

function f1() {
$(".child3").css("z-index", 1000).animate({
height: "100%",
width: "100%"
}, 1000).animate({
width: "49.8%",
height: "49%"
}, 1000, function() {
$(this).css("z-index", 100);
f2();
});
}

function f2() {
$(".child4").css("z-index", 1000).animate({
height: "100%",
width: "100%"
}, 1000).animate({
width: "49.8%",
height: "49%"
}, 1000, function() {
$(this).css("z-index", 100);
f1();
});
}
f1();
.parent {
position: relative;
width: 500px;
height: 100px;
margin: 0 auto;
text-align: center;
font-size: 0;
}
.child {
position: absolute;
width: 49.8%;
height: 49%;
background-color: green;
font-size: 16px;
}
.child1 {
left: 0;
top: 0;
}
.child2 {
right: 0;
top: 0;
}
.child3 {
left: 0;
bottom: 0;
}
.child {
right: 0;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="parent">
<div class="child child1">Child1</div>
<div class="child child2">Child2</div>
<div class="clear"></div>
<div class="child child3">Child3</div>
<div class="child child4">Child4</div>
</div>

关于Jquery动画从右下角到,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26271510/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com