Simple javascript problem
I have one simple problem i guess that i can't solve
Here is the complete code
<!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>
Now, few things in which I need help and don't understand how can they be done. First of all, how can I make that both animations occur only once?
Secondly, how can the green box always appear over the blue one?
Then, how can I make buttons disappear after being clicked?. So when I for example click "Move Up", I need that button to disappear.
And lastly, when "Move Left" is triggerd, I need that "Move Up" button disappears also, just like the "Move Left", while on the other hand, "Move Left" won't disappear when "Move Up" is clicked ("Move Up" just will)
Is this simple,and could it be done? Please help!
>>how can I make buttons disappear after being clicked
If you set ID to buttons, it could be done like this
$(document).ready(function() {
$("#button1").click(function () {
$(this).hide();
});
});
By using $(element).click(...) you add event listener to specific element, but it can be done only after dom is ready. Read about js and events to understand what i'm talking about.
>>when "Move Left" is triggerd, I want that "Move Up" button disappears also, just like the "Move Left"
add click handler for moveLeft where moveUp disappears just like in example above
Edit: "this" refers to the clicked element. use moveUp id in the moveLeft click handler to make it disappear.
>>I need that the green box always appears over the blue one
set z-index style for your boxes
>>I want that both animations can occur only once
You could set up some animationComplete variable that shows whether animation was complete or not.
精彩评论