0

そのため、divタグに少し問題があります(フィドルのデモはこちら: http://jsfiddle.net/4ZQLq/ )。

私が達成したいのはこれです：

左の画像をクリックすると、div タグ (app1) 全体が左に移動してフェードアウトします。また、その背後にある div タグ (app2) もフェードインする必要があります。

私がそれらを同じサイズにすると、それはうまく機能します。しかし、私がそれらを異なるサイズにしたとき、これが私が抱えている問題です(再び、私のフィドルで視覚的なデモを確認してください: 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

div を最初は表示せずにフェードインしたいようですねapp2。それは正しいですか? マークアップで次のように設定します。

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

フィドル

于 2013-05-20T23:52:33.983 に答える
0

前のものをクリックするまで後ろのものを非表示にしたい場合はdisplay: none;、CSS に追加するのと同じくらい簡単です#app2。

更新されたフィドルは次のとおりです。http://jsfiddle.net/jakelauer/4ZQLq/2/

于 2013-05-20T23:53:27.923 に答える
0

CSS の適切な実践として、次のような一般的な CSS タスクをヘルパー クラスに配置して、簡単に再利用できるようにすることをお勧めします。

.hidden{
    display: none;
}

これにより、一般的に CSS クラスが小さくなり、HTML コードの読みやすさが向上します。これは、混乱が少なくなり、一般的な関数にわかりやすい名前を付けることができるためです。HTML には複数のクラスを追加でき、適切なクラス名を使用すると、非常にわかりやすいものになる可能性があることに注意してください。

前の 2 つの回答を新しい 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 の外観を管理すると、長期的には生活が楽になり、コードが読みやすくなり、hspace などの特定の HTML プレゼンテーション属性が削除されるため、Web 標準になりつつあります。これが役立つことを願っています！

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

于 2013-05-21T01:05:42.687 に答える