gpt4 book ai didi

javascript - 如何通过单击链接来调整两个div的大小

转载 作者:行者123 更新时间:2023-11-28 07:03:24 24 4
gpt4 key购买 nike

我有两个div,每个div的高度分别为15%和15%,中间留有70%的高度。在单击链接时,我希望每个div的高度增加到50%,然后再缩小到15%,以创建闪烁效果,以便中间区域的内容可以更改为看不见。

有谁知道我可以使用哪种jquery或css来实现这一目标?

我尝试了这个:

   $( ".mnav li" ).click(function() {
$( ".header" ).animate({
height: 50%
}, 5000,});


旨在使div的点击次数达到50%

更新::我该如何在下面编辑此代码,以便在眨眼动画结束后立即删除该类,以便如果单击另一个链接,它将再次运行?

$( '.mnav a' ).click(function() {
$( '.border' ).addClass('blink');
});

最佳答案

尝试这个....

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Temp</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" media="all" href="style.css" type="text/css">
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#div2').hide('slow');
$('#div1').animate({height:'50%'})
$('#div3').animate({height:'50%'})

$('#div2').show('slow');
$('#div1').animate({height:'15%'})
$('#div3').animate({height:'15%'})
});


})
</script>

</head>

<body>

<div id="div1" style="background-color:red;width:100%;height:15%;">
</div>
<div id="div2" style="background-color:blue;width:100%;height:70%;">
</div>
<div id="div3" style="background-color:black;width:100%;height:15%;">
</div>
<button id="btn">Click</button>


</body>
</html>


CSS:

html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}

#wrapper {
margin: 0 auto; overflow: hidden; width: 960px; // width optional
}
#left {
background: yellow; float: left; width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px;

}


JSFiddle

关于javascript - 如何通过单击链接来调整两个div的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33092537/

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