Intro to JQuery effects!

A simple primer, Prepared by Zoe F

Setting up our document

Let's create for ourselves three text documents in a brand new folder: index.html, jqueryCSS.css, and jqueryJS.js

Let's set up our html file as normal.

<!doctype html>
<html>

    <head>
    </head>

    <body>
    </body>

  </html

Now, let's link to our other two files. Assuming that they're all in the same folder, it should look like this in our header.
```
<link rel="stylesheet" href="jqueryCSS.css">
<script src="jqueryJS.js"></script>
```
Test that our CSS file is communicating withyour html by changing the background color of your body tag in your CSS file.
```
body {background-color: lightgreen;}
```
Test that your Javascript file is communicating with your html by putting an alert in it.
```
alert("Yep, I'm working");
```
Now let's add the JQuery library to our document so that our html can access all the cool functions contained there.
Rather than download and link to the .js document that has all the jquery functions, let's link to it where it's hosted on the google servers! First, in your browser, find the most recent version of jquery. Go to the google developers page below, or google "google jquery library". This is where all the javascript libraries are that they support.

https://developers.google.com/speed/libraries/devguide
Once you're there, take a look at all the various libraries of functions google offers. Find JQUERY. We want the most recent version. Note that there are a couple different JQuery libraries - The regular one, the JQuery.UI one, and a Mobile version. We just want the regular old JQuery.
Copy the snippet of code you'll need to include in your html head to have access to all the jquery functions. Just like including your own .js file, it will start with <script....Paste it into the head of your HTML document after your css file, but before your own JS file. You will have two <script></script> tags, both with different .js files, like so:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jqueryJS.js"></script>
```
Then to prove to yourself that this is just another .js file, just like you have been using this whole time, go to the url you just pasted in your browser. See if you can pick out the various functions you now have access to.

google's instance of the jquery library

Simple hides and shows

Let's start off simple. in the body of our HTML file, Let's make a paragraph with an ID of myParagraph, and put some text in it, that we can show and hide.
```

<p id="myParagraph">Hello there folks</p>
```
Now, let's make two buttons, one to hide it and one to show it. Instead of calling a function with them, just give them the IDs HideMe and ShowMe.
```
<button id="HideMe">Hide this thing!</button>
<button id="ShowMe">Show this thing!</button> 
```
In our CSS file, let's style that paragraph a little bit to make it pretty.
```
p  {
 width:300px;
 border:1px solid black;
 padding:10px;
 margin:0px;
 }
```
And test it.
Now, let's make two JQuery functions that can triggered when someone clicks on one of these buttons. One function will find and hide our paragraph, one will find and show it. First of all, we need to create a (document).ready function to wrap all of our JQuery functions, to make sure that no one can do anything on the page until all of our files are fully loaded.
```
$(document).ready(function(){  
   
 });
```
Great! Now, let's create our first function inside of it. Let's give ourselves some space inside that document.ready function, and also use commenting to keep track of where we are.
```
//Example 1
```
First, let's use the dollar sign to tell javascript that these are special JQuery functions we're writing.
```
$
```
Then let's target the HideMe button
```
$("#HideMe")
```
and wait until it's clicked, using dot notation.
```
$("#HideMe").click
```
Now, click() is actually a function itself. What instructions do we want to call when the "click" function is involked? Let's make a space to define them, just the same as we would define any function!
```
$("#HideMe").click(function() {
         }
```
Well, what do we want it to do? We want it to find the element with ID "myParagraph" and call a new function, hide() on it, that will make it not viewable on the screen! Put that inside our definition!
```
$("#myParagraph").hide();   
```
The whole function together, inside of our document.ready of course, looks like this:
```
 $("#HideMe").click(function(){   
     $("#myParagraph").hide();
 });
```
Test it!
But wait! What if they click the Show Me button instead? We need a second function that will do the same thing as our first one, but instead of hiding our P, it should show it! lets add a new function under our old one (but still inside our document.ready)
```
$("#ShowMe").click(function(){   
    $("#myParagraph").show();
 });
```
Test it out!

Fading!

Let's make ourselves three boxes with the ID's div1, div2, and div2, for simplicity. We want them to slowly face into view when someone clicks a button. It will look really cool. First, let's give ourselves some room under our first example for our second one, and a line to divide them out.
```
<BR><hr><BR>
```
And some comments so we know what we're looking at later
```

```
Now, let's make those boxes, and let's stack them on top of each other with <br>'s.
```
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
```
Now, let's use some quick-and-dirty inline styling to make each of these boxes look pretty. You can do it inline, or you can do it in your extrenal CSS, the choice is up to you! If you do it inline, the style attribute on each div would look like this:
```
style="width:80px; height:80px; display:none; background-color:PICK A COLOR;"        
```
Choose a different color for each of the three boxes you've made.
Alright, we want these buttons to fade into existance. Let's make a button to click to make that happen, and give it the ID clickToFade. YOu can put it on top or under the boxes, up to you.
```
<button id = clickToFade>Click to fade in boxes</button>
```
Cool. Let's make a jquery function to make it happen. In our javascript file, inside of our document.ready(), below our first example, let's make some room for a second example.
```
//Example 2            
```
And let's start off by grabbing the status of our clickToFade button
```
$("#clickToFade")
```
Then calling the click function on it to listen for when the click action occurs. When it does, we're going to create a new function that will do some stuff for us
```
$("#clickToFade").click(function(){
         
 });
```
Alright, what instructions do we want to give this new function? Let's do three different things inside this function, one to each square, so that they fade in at three different speeds. To div1, let's just make it appear using all the default "fade in" function's preset values.
```
$("#div1").fadeIn();
```
Then let's take div2 and make it fade in, but feed the extra argument "slow" to make it fade in slower
```
$("#div2").fadeIn("slow");
```
Finally, let's take div3 and fade in over the space of 5 seconds, which is 5000 miliseconds.
```
$("#div3").fadeIn(5000);
```
The entire function within a function will look like this:
```
$("#clickToFade").click(function(){
     $("#div1").fadeIn();
     $("#div2").fadeIn("slow");
     $("#div3").fadeIn(5000);
 });
```

fadeIn()

Sliding Accordions

Let's make a box that animates into existance only when we want it to! That's much cooler than just appearing out of nowhere. Underneith your last example in your HTNL, let's make room for a new one:
```
 
```
And let's give ourselves two divs. One to click, which we're going to give the ID "flip":
```
<div id="flip">Click to slide down panel</div>
```
And one to slide down when that first div is clicked, which we're giving the ID of "panel"
```
<div id="panel">Peekaboo! I'm sliding down!</div>
```
Alright, let's add some styling to both of these divs, in our CSS file. You can make them look like whatever you'd like, but be sure that they have a border and a background color so that you can see the effect more clearly. We're going to define both ID's at the same time!
```
#panel, #flip {
 padding: 5px;
 background-color: #e5eecc;
 border: solid 1px #c3c3c3;
 }
```
But wait, I want the div with the ID of "panel" to start off invisible and sliiiide into existance. So underneith our first definition, let's cascade a second one just for that panel. I'm going to give mine some extra padding too, but that's up to you.
```
#panel {
           padding: 50px;
           display: none;
         }
```
Alright, let's make a function in our Javascript file, inside of our document.ready() of course, that identifies if "flip" has been clicked
```
//Example 3
```
```
$("#flip").click(function(){
```
```
});
```
And then inside that function, let's identify the div with the id of panel, and calls the cool new slideDown function on it. We're going to feed in the "slow" parameter, but you can feed in whatever parameter you want! Perhaps change the number of miliseconds it takes to slide down!
```
$("#panel").slideDown("slow");
```

slideDown()

Animations!

Let's make an object move around the screen in a more sophisticated way! Let's change its size, opacity, and location...all at the same time! To do that we need to use jquery's animate() function. Let's do it! First, let's make space on our html file to animate
```

```
And now let's create something to interact with. I'm going to use a button, but there's no reason you couldn't make a clickable div, like in the last example! That way you could style it any way you wanted and make it look cool
```
<button id="animateIt">Start Animation</button>
```

Now let's make something that animates when we clik that button. I want a div with ID animateMe.

<div id = "animateMe"></div>

And let's give it some styling in our CSS document, or inline.

#animateMe {
         background:#98bf21;
         height:100px;
         width:100px;
         position:absolute;
         }

Looking good! Now, let's go into our javascript, inside of our document.ready() and track down our button:
```
//Example 4
$("#animateIt")
```
Assign it to a click function:
```
$("#animateIt")click(function(){

 });
```
And tell it what to do when it's clicked! In this case, we want to call the animate function on it:
```
 $("#animateMe").animate({
 
 });
```
And let's give it some specific instructions about how we want it to be animated:
```
 left: '350px',
 opacity: '0.5',
 height: '150px',
 width: '150px'
```
The whole thing together would look like:
```
 //Example 4
 $("#animateIt").click(function(){
    $("#animateMe").animate({
      left: '350px',
      opacity: '0.5',
      height: '150px',
      width: '150px'
    });
 });
```
You can experiment with other instructions - try a bunch and see what effect they have!

animate()

Are you stuck? Here are the answers, but don't touch 'em unless you're all done! HTML/CSS/Javascript