animateFrom() – jQuery Plug-In

I meant to write a post this week on how to use jQuery animations in place of Lectora animations, but work seemed to get in the way. So instead I thought I would share a jQuery plugin that I use for some of the animations. It is a simple fade in animation but instead of animating to a location it animates from a location. This allows me to compose my screens in Lectora in their final state, the way they will look after all build animations are complete.

Basic Usage

To animate any element, such as a simple image:

<div id="hideme">Hide Me</div>
<div id="animateme">Animate Me - default</div>
<div id="animateme2">Animate Me - different</div>
<img id="book" src="book.png" alt="" width="100" height="123"
     style="position: relative; left: 10px;" />

$('#hideme').click(function() {
    $('#book').hide();
  });

$('#animateme').click(function() {
    $('#book').animateFrom();
  }); 

$('#animateme2').click(function() {
    $('#book').animateFrom({direction:'bottom', delta:200, speed:2000, callback:simpleAlert});
  });

You can view the demo here.

This may not be earth-shattering, but it does fill a need when building Lectora courses that need a little more finesse with the animations. Building the jQuery plug-in was just an easy way to manage using the technique on multiple projects.

Download animateFrom plug-in.