Lab 13: JQuery Animation

      This is lab 13 of the year. Another JQuery lab. But this time is special. It is animating. We can literally use these codes to make animations within a website without using any video editing tools. How cool is that? But that will take so so many codes to achieve, though it is achievable. At first, we were shown how to this JQuery .animation() method would work. We can move an object around, change it's color, opacity, position, turn it into different all shapes and and sizes, and even make it crazy. We are basically manipulating the CSS with JQuery. And that was the goal of this lab: to demostrast each of these animations with 4-5 boxes created by a <div> with CSS.

       I didn't want to create so many boxes, so I just made one and created all the animations to animate that one orange box that I've created. For some reason, I don't have much to write or say today. Everything is so short. Well, hope I have more to say while I am writing the blog for the Identity website, which I put so much effort in. So I created 5 button linked to 5 different functions with JQuery that demosrate each of these five animations. There is move, change opacity, change into a circle, change size, and make it crazy, which is a combination of all that took a long time to make. I had to combine all the codes and created a very big block of code for just one short animation that last a few seconds. The reason is that for something to be crazy, it has to fast, so no matter how much animations I add to it, it doesn't make much different to the overall time of the flash of animation. I don't think any of the students that saw this knew how many codes were involved to it. When Ms. Ramirez showed it to the class, she said "That's crazy?"... I had nothing to say... Anyways, I also tried to make the box actually animation and not just one animation that changed, so that means that I would have quite a huge amount of codes for each function.

http://techteach.us/WCP2016/HJiahua/Labs/lab13/LB13_Jiahua.html