brooke_theperson Posted May 5, 2015 Share Posted May 5, 2015 Okay, so I am driving myself crazy. I have a stick figure character that moves right and left. I also have a play button. When the button is clicked an apple falls from a tree. When it gets to the bottom it is supposed to dissapear. But it does not. Please, help. Are there any openings or mistakes in this code? <!DOCTYPE html><html><head> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><style>.character{ height: 150px; width: 70px; margin-top: -151px; margin-left: 300px; position: absolute;}body{ background-image: url("https://lh3.googleusercontent.com/-Q4hNQoLkZEw/VUeBIKRItxI/AAAAAAAAAEc/LIGJGi42At4/w426-h239/tree.png"); background-size: 800px 550px; background-repeat: no-repeat;}.head{ width: 50px; height: 50px; background-color: rgba(); border: 3px solid black; border-radius: 100%; margin-top: -40px; ;}.body{ height: 80px; width: 3px; background-color: black; ;}.leftarm{ height: 50px; width: 3px; background-color: black; transform: rotate(-60deg); margin-top: -100px; ;}.rightarm{ height: 50px; width: 3px; background-color: black; transform: rotate(60deg); margin-top: -50px; ;}.leftleg{ height: 50px; width: 3px; background-color: black; transform: rotate(-140deg); margin-top: 43px; ;}.rightleg{ height: 50px; width: 3px; background-color: black; transform: rotate(140deg); margin-top: -50px; ;}.lefteye{ height: 6px; width: 6px; background-color: black; margin-top: 15px; margin-left: 15px; border-radius: 100%;}.righteye{ height: 6px; width: 6px; background-color: black; margin-top: -6px; margin-left: 28px; border-radius: 100%;}.mouth{ border-radius:0 0 50% 50%; background-color: black; height: 10px; width: 20px; margin-top: 10px; margin-left: 14px;}.begin{ height: 80px; width: 80px; background-color: rgba(); border: 3px solid blue; margin-top: -115px; margin-left: 650px;}.leaves{ width: 100%; height: 100%; background-color: rgba();}.apple{ position: absolute;}.applemain{ height: 30px; width: 30px; background-color: red; border-radius: 100%; margin-top: -5px;}.applestem{ height: 10px; width: 4px; background-color: brown; margin-left: 20px; transform: rotate(10deg); margin-top: -7px;}.appleleaf{ height: 15px; width: 10px; transform: rotate(50deg); background-color: green; margin-left: 20px; border-radius: 70%;}</style><script> $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 37) { $('.character').animate({left: '-=50px'}, 200); } if (e.keyCode == 39) { $('.character').animate({left: '+=50px'}, 200); } }); $(".begin").click(function(){ $(".leaves").append("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); $(".apple").animate({top: "+=400px"}, 1500); $(".leaves").hide("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); }); });</script><body> <div class = "leaves"></div> <div class = "character"> <div class = "head"> <div class = "lefteye"></div> <div class = "righteye"></div> <div class = "mouth"></div> </div> <div class = "body"></div> <div class = "leftarm"></div> <div class = "rightarm"></div> <div class = "leftleg"></div> <div class = "rightleg"></div> </div> <div class = "begin">Play</div></body></html> Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 5, 2015 Author Share Posted May 5, 2015 Also, I tried using remove() but it didn't work either. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 5, 2015 Share Posted May 5, 2015 to hide you simply use $(".leaves").hide(); You have to wait until animation is finished before hiding the element in question, else it will instantly start to move to bottom and at the same time fadeOut (.hide()). Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 5, 2015 Author Share Posted May 5, 2015 so how do I wait for the div to finish animating? Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 5, 2015 Author Share Posted May 5, 2015 Also, when the apple does hide, all of the other elements hide as well. Link to comment Share on other sites More sharing options...
Ingolme Posted May 5, 2015 Share Posted May 5, 2015 Put a call back on the animation to hide the element when it's completed: $(".apple").animate({top: "+=400px"}, 1500, function() { $(".apple").remove();}); Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 5, 2015 Author Share Posted May 5, 2015 Thanks so much! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now