0

簡単な問題が1つあります。解決できないと思います。

これが完全なコードです

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<style type="text/css">
<!--
#content{
    width:300px;
    height:300px;
    background-color:#FF0000;
    overflow:hidden;
    position: relative;
    top: -300px;
}
#content1{
    width:300px;
    background-color:#33FF00;
    height:300px;
    z-index:100;
    position: relative;
    left: 300px;
}
#content2{
    width:300px;
    height:300px;
    background-color:#000099;
    z-index:100;
    position: relative;
    top: -400px;
}



-->
</style>


</head>
<body>
<script language="javascript">
function example_animate(px) {
    $('#content2').animate({
        'marginTop' : px
    });
}
</script>
<script language="javascript">
function example_animate2(px) {
    $('#content1').animate({
        'marginLeft' : px

    });


}
</script>


    <p>

       <input type="button" value="Move Up" onClick="example_animate('-=200px')" />
      <input type="button" value="Move Left" onclick="example_animate2('-=300px')" />

    </p>
    <div id="content1"></div>


    <div id="content">

</div>


<div id="content2"></div>




</body>
</html>

さて、私が助けを必要とし、それらがどのように行われるのか理解していないいくつかのことがあります。まず、両方のアニメーションが1回だけ発生するようにするにはどうすればよいですか？

次に、緑色のボックスが常に青色のボックスの上に表示されるのはどうしてですか？

次に、ボタンをクリックした後にボタンを非表示にするにはどうすればよいですか？。たとえば、[上に移動]をクリックすると、そのボタンが消える必要があります。

最後に、「左に移動」がトリガーされたときに、「左に移動」ボタンも「左に移動」と同じように消える必要がありますが、「左に移動」は「上に移動」がトリガーされたときに消えません。クリックしました（「上に移動」はちょうどそうなります）

これは簡単ですか、それは可能ですか？助けてください！

4

1 に答える 1

0

>>クリック後にボタンを非表示にするにはどう
すればよいですかIDをボタンに設定すると、次のようになります

$(document).ready(function() {
$("#button1").click(function () {
$(this).hide();
}); 
});

$（element）.click（...）を使用すると、特定の要素にイベントリスナーを追加できますが、これはdomの準備ができた後でのみ実行できます。私が話していることを理解するためにjsとイベントについて読んでください。

>>「左に移動」がトリガーされたときに、「左に移動」ボタンも消えるようにしたいのですが、「左に移動」は、
上記の例のようにmoveUpが消えるmoveLeftのクリックハンドラーを追加します
編集：「これ」はクリックされたものを指しますエレメント。moveLeftクリックハンドラーでmoveUpidを使用して、それを非表示にします。
>>緑色のボックスが常に青色のボックスの
z-indexスタイルの上に表示される必要があります
>>両方のアニメーションが1回だけ発生する
ようにしますアニメーションが完了したかどうかを示すanimationComplete変数を設定できます。

于 2011-09-19T23:05:17.457 に答える