brooke_theperson 0 Posted May 5, 2015 Report 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> Quote Link to post Share on other sites
brooke_theperson 0 Posted May 5, 2015 Author Report Share Posted May 5, 2015 Also, I tried using remove() but it didn't work either. Quote Link to post Share on other sites
dsonesuk 914 Posted May 5, 2015 Report 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()). Quote Link to post Share on other sites
brooke_theperson 0 Posted May 5, 2015 Author Report Share Posted May 5, 2015 so how do I wait for the div to finish animating? Quote Link to post Share on other sites
brooke_theperson 0 Posted May 5, 2015 Author Report Share Posted May 5, 2015 Also, when the apple does hide, all of the other elements hide as well. Quote Link to post Share on other sites
Ingolme 1,021 Posted May 5, 2015 Report 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();}); Quote Link to post Share on other sites
brooke_theperson 0 Posted May 5, 2015 Author Report Share Posted May 5, 2015 Thanks so much! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.