Lab 6 JQ Stop

In this lab, I recreated Lab 5 and added stop buttons to stop the animations of the animated square. To do this, I copied the code from Lab 5 and pasted it into the files of Lab 6. After that, I typed in <button> tags in the HTML file inside the div with an id="secBack". I typed inside for the first <button> tags, Stop Current Animation with an id="stopCurrentAnimation". The second <button> tags had an id="stopAllAnimation" that said Stop All Animations. The last <button> tags had and id="skipAnimations" that read Skip Animations. In the CSS, I added cursor: pointer; inside the button CSS. In the JavaScript, I typed in code that makes the added buttons function successfully. For the Stop Current Animation button, I typed in $("#stopCurrentAnimation").click(function() { var square = $("#square"); square.stop(); });. This piece of code gets the blue square on the screen and makes the animation stop when the button is pressed. For the Stop All Animations button, I typed in $("#stopAllAnimation").click(function() { var square = $("#square"); square.stop(true, false); });. This piece of code gets the blue square on the screen and makes all animations stop animating when the button is clicked. The Skip Animations button lastly has the code,  $("#skipAnimations").click(function() { var square = $("#square"); square.stop(true, true); });. This piece of code get the square on screen and skips the animations of the square resulting in the end product of the animations. Knowing how to use Jquery stop allows the web designer to create better websites and animations for said websites.

Lab 6: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_06/Lab_6.html