简单的JavaScript问题

时间:2011-09-19 22:54:10

标签: javascript jquery transitions

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

这是完整的代码

<!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 个答案:

答案 0 :(得分:0)

&gt;&gt;点击后如何使按钮消失
如果您将ID设置为按钮,则可以像这样完成

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

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

&gt;&gt;当触发“向左移动”时,我希望“向上移动”按钮也消失,就像“向左移动”
添加moveLeft的click处理程序,其中moveUp就像上面的例子一样消失了 编辑:“this”指的是点击的元素。在moveLeft点击处理程序中使用moveUp id使其消失。
&gt;&gt;我需要绿框始终显示在蓝色框
上 为你的盒子设置z-index样式
&gt;&gt;我希望这两种动画只能出现一次
您可以设置一些animationComplete变量来显示动画是否完整。