Using jQuery with Hype

Why use jQuery with Hype? JQuery provides commands for fade-ins, fade-outs, and other animated effects. So, you can bypass much of the clumsy handiwork in Hype creating animations, and dealing with keyframes and timelines by using jQuery. But you can still use Hype to layout your design.

JQuery is a popular, and powerful, JavaScript library that makes it easy to select elements on an HTML document and create animations, effects, and transitions. JQuery isn’t a separate language–it’s simply a set of well-written JavaScript code that groups together commands to make it easier to do things. For example, if you were to write (hypothetical) code in JavaScript to open a door, you might have to write several lines of instruction:
1. Step up to the door
2. Grab the handle
3. Turn clockwise
4. Push

In jQuery, all of these commands might be grouped together in a single function called, Open Door. This saves you a lot of time and effort. Follow these steps to create a simple example that uses jQuery to fade out an object.

1. In Hype 1.6.0, edit the Head section of the HTML document. Select the Document inspector tab, and click on the “Edit Head HTML…” button.

2. In between the <head> and </head> tags, add this script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

The <script> tag tells the browser to download the jQuery library from Google, which hosts the code.

3. Return to the Hype stage. Select the element you want to animate with jQuery. In the Identity inspector (the far right tab), provide a Unique Element ID. For this example, add an image and give it the unique name, obamaheadshot. It may say “Automatically Generated”, but put your cursor inside the field to enter your own.

4. Create an interaction that will trigger a jQuery effect. In this example, assign an On Mouse Click event to the image. For Action, choose “Run JavaScript…”, and for Function: choose “New Function”. An untitledFunction() appears as your new function.

5. In the untitledFunction() page that appears, you can add your own JavaScript (or jQuery) code. In between the curly braces of the function, add this statement.

$("#obamaheadshot").fadeOut();

 

The dollar sign, parentheses, and quotation marks, $(“”), is the jQuery syntax to select something in the HTML document. The pound sign is a CSS way of indicating that the thing is a unique element. So, the statement selects the item marked as obamaheadshot, and applies the fadeOut() command to it. The fadeOut() command makes it fade from 100% opacity to 0% opacity.

6. Try the entire interactivity out here, or below. Click on the image of Obama. The photo fades out using a single jQuery command, with no timeline animation necessary.

Download the completed Hype file. Learn about other jQuery effects. Try starting with these:

fadeIn();
fadeOut();
fadeToggle();
hide();
show();
slideDown();
slideUp();
slideToggle();

A word about Dropbox: Although Hype makes it easy to publish directly to your Dropbox public folder, Dropbox is really meant for storage and file sharing, and not for web hosting. Performance isn’t the greatest from Dropbox, so upload your published files to your own server.