In this exercise, you will work a little more with jQuery and explore a few more things it will help you do with your pages.

To get you started, create an .html file from the provided HTML code and a corresponding .css file from the CSS code. That will get you started with some basics. Make sure the page is loading the corresponding CSS (which is needed for some of the things we'll be doing to work).

You should create JavaScript code to make is behave as described below…

Animation: Test It Out

All of our jQuery objects have an .animate() function that can be used to animate their CSS properties. Here's an example usage, since the arguments we have to give it are a little different than anything we have seen before:

animate_demo = function() {
  newstyle = {
    'font-size': '250%',
    'letter-spacing': '0.5em'
  }
  jQuery('#animations h2').animate(newstyle, 1000)
}

The .animate() function needs to be given stylesheet information for how the elements should look after the animation.

The newstyle variable here holds a JavaScript object: the syntax is a little like CSS, but notice the differences and don't confuse the two. Here, both the property and value are represented as JavaScript strings, and a comma separates the elements. The result is an object that contains some style information that jQuery can use.

The .animate function will animate the element(s) from the current style to the new one, taking one second (1000 milliseconds, the second argument).

In your jQuery setup function, connect this function to the click event on the first button (id="demo"). With everything hooked up, you should be able to click the button and see the <h2> animate.

Animation: Create More

Let's use the other buttons there to do some different animations to that <h2>. As with last week, for each behaviour, you'll be (1) creating a function to do the work, and (2) adding to your setup function to connect the function to the appropriate event.

When we click the right arrow button, we want the title to disappear: animate its height to nothing, and its position off the right of the screen. That can be done by animating its properties 'height' to '0' and 'left' to '100%'.

(This only works because we set position: relative; in the original CSS: if it doesn't move, check to make sure that style is active.)

The left arrow should bring the <h2> back: animate its height back to '1.5em' (as it was originally in the CSS) and 'left' to '0'.

For the last button, apply the jQuery function .slideToggle() (with no arguments) to the <h2>. This function is a little smarter: it does some animations on its own, and keeps track of whether it needs to display/hide each time its called.

Video: example of the Exercise 7 behaviour

Adding and Removing Content

In the second half of the page, we want to add and remove content.

When the first button (“Say hello”) is clicked, add a paragraph at the end of the <div id="newcontent">. This can be done with the .append() function, like this:

jQuery(???).append('<p>Hello!</p>')

Similarly, when the second button (“Say goodbye”) is clicked, add a paragraph that says “Goodbye”.

When the last button (“I take it back”) is clicked, the last paragraph in the <div id="newcontent"> should be removed.

First, select all of the paragraphs in that <div> (hint: 'div#newcontent p'). Take only the last with the function .last() (which works like .first() from exercise 6). Finally, .remove() that element.

Submitting

Upload the files to the course web server, as you have before. You may want to create a folder exercise7. Submit the URL of your HTML page to the CourSys activity Exercise 7.