Простая проблема с JavaScript

У меня есть одна простая проблема, я думаю, что я не могу решить

Вот полный код

<!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 ответ

>> Как я могу сделать, чтобы кнопки исчезли после нажатия
Если вы установите ID для кнопок, это можно сделать так

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

Используя $(element).click(...), вы добавляете прослушиватель событий к конкретному элементу, но это можно сделать только после того, как dom будет готов. Читайте о JS и событиях, чтобы понять, о чем я говорю.

>> Когда запускается "Переместить влево", я хочу, чтобы кнопка "Переместить вверх" также исчезла, как и "Переместить влево"
добавить обработчик кликов для moveLeft, где move Up исчезает, как в примере выше
Редактировать: "это" относится к нажатому элементу. используйте идентификатор Move Up в обработчике кликов moveLeft, чтобы он исчез.
>> Мне нужно, чтобы зеленое поле всегда отображалось над синим
установить стиль z-index для ваших ящиков
>> Я хочу, чтобы обе анимации могли происходить только один раз
Вы можете установить некоторую переменную animationComplete, которая показывает, была ли завершена анимация или нет.

Источник
Другие вопросы по тегам