Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
简单的javascript问题_Javascript_Jquery_Transitions - Fatal编程技术网

简单的javascript问题

简单的javascript问题,javascript,jquery,transitions,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=

我有一个简单的问题,我想我解决不了

这是完整的代码

<!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>
现在,我需要帮助的事情很少,我不知道如何才能做到。 首先,如何使两个动画只出现一次

第二,绿色的盒子怎么总是出现在蓝色的上面

那么,我怎样才能使按钮在被点击后消失呢?。 例如,当我单击“上移”时,我需要该按钮消失

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

这很简单,可以做到吗?请帮忙

>如何使按钮在单击后消失 如果您将ID设置为buttons,则可以这样做

$(document).ready(function() {
$("#button1").click(function () {
$(this).hide();
}); 
});
通过使用$element。单击。。。您可以将事件侦听器添加到特定元素中,但只有在dom准备就绪后才能执行。阅读js和事件,了解我在说什么

>>当向左移动被触发时,我希望向上移动按钮也消失,就像向左移动一样 添加moveLeft的click处理程序,其中moveUp将消失,如上面的示例所示 编辑:这是指单击的元素。在moveLeft click处理程序中使用moveUp id使其消失。 >>我需要绿色的盒子总是出现在蓝色的上面 为方框设置z索引样式 >>我希望两个动画只能出现一次
您可以设置一些animationComplete变量来显示动画是否完成。

您可能希望将其拆分为单独的问题。你在一篇帖子里问了很多问题。我想实现四件事,一件没有另一件对我来说是无用的。但是如果你能在其中一个方面提供帮助,那就太好了!!看来这是在我有机会之前关闭的。问题是,社区试图使这些问题对其他有类似问题的人重复使用。通过将所有这些结合起来,并根据您的具体情况如此明确地陈述它们,您就限制了针对您的具体案例的答案的有用性。而且,它的措辞有点像是一个为我做这件事而不是一个通常不被接受的问题。很明显,我不能独自做这件事,我需要帮助:我会以某种方式重新措辞,但是我需要在多个线程中问多个问题吗?我的建议是:自己尝试,在遇到问题的地方问一些具体的问题,而不是发布一个规范,让别人为你写代码。谢谢!我已经使绿色框出现在所有其他内容上,现在我将尝试您编写的所有内容