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.
1. Step up to the door
2. Grab the handle
3. Turn clockwise
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:
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.
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.
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.