Question

所以我的div标签有点问题（这里是小提琴演示：http://jsfiddle.net/4ZQLq/）。

我想要完成的是：

单击左侧图像时，整个div标签（app1）应向左移动并淡出。那个（app2）背后的div标签应该是FADE IN。

当我把它们放到相同的尺寸时，它就会如此。但是当我把它们做成不同尺寸时，这就是我遇到的问题（再次，检查我的视觉演示小提琴：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>

Answer 1

听起来你希望你的app2 div最初不显示然后淡入。这是正确的吗？将其设置为标记：

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

Fiddle

Answer 2

如果您想要隐藏后面的那个，直到您点击前面的那个，就像将display: none;添加到#app2的CSS一样简单。

这是更新的小提琴：http://jsfiddle.net/jakelauer/4ZQLq/2/

Answer 3

作为一个很好的CSS实践，我建议将这样的常见CSS任务放入辅助类中以便于重用：

.hidden{
    display: none;
}

它通常会产生较小的CSS类，并且可以提高HTML代码的可读性，因为您可以减少混乱，并且可以为常用函数指定友好名称。请记住，您可以在HTML中添加多个类，并且具有良好的类名，它们可以变得非常具有描述性。

我用一些新的CSS重做前两个答案，允许：

删除＆lt; b＆gt;＆lt; u＆gt;。标签，现在由CSS处理。删除＆lt; img＆gt;上的hspace属性标签，已弃用且不再受HTML5支持。此外，许多修改演示文稿的HTML属性标签现在都由CSS处理，如果您愿意，可以在其他页面中重复使用。

毕竟，表单之前的HTML（在我看来）更容易阅读，看起来像这样：

<body>
<!-- php stuff goes the body -->
<div id="app1"><p class="reminderFont">Do you want to make a reminder?</p>
<br>
<img class="appIMG1 floatLeft" src="YES.png">
<img class="appIMG2 floatRight" src="NO.png">
</div>

<div id="app2" class="hidden">

使用CSS管理HTML外观将使您的生活更轻松，使代码更易于阅读，并且正在成为Web标准，因为某些HTML表示属性（如hspace）已被删除。我希望这有帮助！

http://jsfiddle.net/VPcJs/3/

如何组织我的div标签？

3 个答案: