0

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

我想要完成的是：

当您单击左侧图像时，整个 div 标签 (app1) 应向左移动并淡出。后面的 div 标签（app2）也应该 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>
4

3 回答 3

0

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

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

小提琴

于 2013-05-20T23:52:33.983 回答
0

如果您希望隐藏后面的那个，直到您单击前面的那个，它就像添加display: none;到 .css 的 CSS一样简单#app2。

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

于 2013-05-20T23:53:27.923 回答
0

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

.hidden{
    display: none;
}

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

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

<b><u> 标签的移除，现在由 CSS 处理。删除 <img> 标记上的 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 的外观将使您的生活更轻松，使代码更易于阅读，并且随着某些 HTML 表示属性（如 hspace）被删除，它正在成为 Web 标准。我希望这有帮助！

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

于 2013-05-21T01:05:42.687 回答