0

我有一个简单的问题，我想我无法解决

这是完整的代码

<!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>

现在，我需要帮助并且不明白如何完成的事情很少。首先，我怎样才能让两个动画只出现一次？

其次，绿色盒子怎么总是出现在蓝色盒子之上？

那么，如何让按钮在被点击后消失呢？. 因此，例如，当我单击“上移”时，我需要该按钮消失。

最后，当触发“左移”时，我需要“上移”按钮也消失，就像“左移”一样，而另一方面，“上移”时“左移”不会消失点击（“上移”只是会）

这很简单，可以做到吗？请帮忙！

4

1 回答 1

0

>>如何让按钮被点击后消失
如果你将ID设置为按钮，可以这样完成

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

通过使用 $(element).click(...) 您可以将事件侦听器添加到特定元素，但只有在 dom 准备好后才能完成。阅读 js 和事件以了解我在说什么。

>>当“向左移动”被触发时，我希望“向上移动”按钮也消失，就像“向左移动”
为 moveLeft 添加点击处理程序，其中 moveUp 消失，就像上面的示例一样
编辑：“this”指的是点击元素。在 moveLeft 点击处理程序中使用 moveUp id 使其消失。
>>我需要绿色框始终出现在
您的框的蓝色一组 z-index 样式上
>>我希望两个动画都只能发生一次
您可以设置一些 animationComplete 变量来显示动画是否完成。

于 2011-09-19T23:05:17.457 回答