gpt4 book ai didi

javascript - 如何组织我的 div 标签?

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

所以我的 div 标签有点问题( fiddle 演示在这里:http://jsfiddle.net/4ZQLq/)。

我想要完成的是:

当您点击左边的图片时,整个 div 标签 (app1) 应该向左移动并淡出。后面的 div 标签 (app2) 也应该淡入。

当我让它们大小相同时,它会这样工作。但是当我把它们做成不同的尺寸时,这就是我遇到的问题(再次检查我的 fiddle 以获得视觉演示:http://jsfiddle.net/4ZQLq/)。

我希望它们有不同的尺寸。让前面的淡出,让后面的淡入。

<!DOCTYPE html>
<html>

<head>

<title>Forget Me Not</title>

<style>

body
{
background-color:#66d9ff;
}

#app1{
position:absolute;
width:250px;
height:250px;
z-index:1;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}

#app2{
position:absolute;
width:300px;
height:300px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center;
}

img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
$(".appIMG1").click(function () {
$("#app1").animate({
left: '250px',
opacity: 0
});
$("#app2").fadeIn("slow");
});
});
</script>

</head>

<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% >
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>

<div id="app2">
<form>
Name for the reminder: <input type="text" name="firstname"><br>
On what days would you like to be reminded on: <br>
<input type="checkbox" name="day" value="Monday">Monday<br>
<input type="checkbox" name="day" value="Tuesday">Tuesday<br>
<input type="checkbox" name="day" value="Wednesday">Wednesday<br>
<input type="checkbox" name="day" value="Thursday">Thursday<br>
<input type="checkbox" name="day" value="Friday">Friday<br>
<input type="checkbox" name="day" value="Saturday">Saturday<br>
<input type="checkbox" name="day" value="Sunday">Sunday<br>
</form>
</div>

</body>

</html>

最佳答案

听起来您希望您的 app2 div 最初不显示然后淡入。对吗?在标记中将其设置为:

<div id="app2" style="display:none">

Fiddle

关于javascript - 如何组织我的 div 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16660006/

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