gpt4 book ai didi

javascript - 淡入淡出显示

转载 作者:行者123 更新时间:2023-11-27 23:43:40 25 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
height: 500px;
display: none;
}

#second {
width: 500px;
height: 500px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>

<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">Home</button></li>
<li id="item2"><button onclick="myFunction2()">About </button></li>
<li id="item3">Contact us </li>
<li id="item4">asda </li>
<li id="item5">dfgdfgd</li>
<li id="item6">sdfghs </li>
<li id="item7">sghsfhs </li>
</ul>
</div>
<div id="myDIV">
<img src="j.png">
</div>
<div id="second">
This is my DIV2 element.
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.display = "block";
document.getElementById("second").style.display = "none";
}
</script>

<script>
function myFunction2() {
document.getElementById("second").style.display ="block";
document.getElementById("myDIV").style.display = "none";
}
</script>
</body>
</html>

两个师在同一个地方交替出现。我怎样才能根据淡入淡出进行这种改变。如延迟出现(淡入)和消失(淡出)。该方法是否适用于菜单的所有元素?谢谢

最佳答案

只需像这样更改您的myFunction():

function myFunction() {
$("#myDIV").fadeIn();
$("#second").fadeOut();
}

function myFunction2() {
$("#second").fadeIn();
$("#myDIV").fadeOut();
}

关于javascript - 淡入淡出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30798345/

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