Lab 6

In lab 6 we had to continue lab 6 and create another simple  html page and use j Query animate to stop all the animations. I just copied lab 5 index to keep the same layout for the box and background. Creating a simple background, heading and the box we were going to use. The page is displaying the box and using the buttons it will have a effect on the box in the center.  First created the box using a div with an Id and using css to create the box.  Once the box was set I added another div that contained the 6 buttons in it. Then after this i made sure my j query tag was in the heading to begin adding the animations to the buttons. In order to change its size, shape, move it and do all at once i used the j query code. Adding the onClick effects allowed the lab to function correctly and do its job. After all of this was done i added another button called stop. This button would stop any animations mid way. to do so i slowed down some of the animations in order to give the consumer some time to stop the animation. The code used for this was:$('#btnStop').click(function() {
$('#animate').stop();
});
});These skills are very important to a web designer because learning how to use j query to do animations adds a better skill set to the web designer and makes the site more intuitive. Some sites have buttons that change the layout or have a cool effect on the website as a whole and having this on your site means that it will keep the viewer interested to see what else the site has to offer.