brooke_theperson 0 Report post 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 Share this post Link to post Share on other sites
brooke_theperson 0 Report post Posted May 5, 2015 Also, I tried using remove() but it didn't work either. Quote Share this post Link to post Share on other sites
dsonesuk 895 Report post 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 Share this post Link to post Share on other sites
brooke_theperson 0 Report post Posted May 5, 2015 so how do I wait for the div to finish animating? Quote Share this post Link to post Share on other sites
brooke_theperson 0 Report post Posted May 5, 2015 Also, when the apple does hide, all of the other elements hide as well. Quote Share this post Link to post Share on other sites
Ingolme 1,008 Report post 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 Share this post Link to post Share on other sites
brooke_theperson 0 Report post Posted May 5, 2015 Thanks so much! Quote Share this post Link to post Share on other sites
