jQuery Transfer with Flair

jQuery UI’s Transfer effect is a very convenient utility to give an illusion that an element flies to another element. You just need to do the following:

$( "#fromElem" ).effect( "transfer", {to: "#toElem", class: "transferElem"}, 500);

jQuery creates an new <div> element that moves from $(“#fromElem”) to $(“#toElem”) in 500ms. If you want to style the new element, the class name you specified in the 2nd argument is applied on the new element. The height and width are calculated at each step by jQuery.

The usual properties on the class are: borders, background, gradients, box-shadow, etc. All of these are fine except you only get a solid block element.

What if you want some markup (aka child elements) in the new element?

Here’s how I did it

  1. At somewhere you starts the effect.
  2. Immediately after the .effect() call, trigger a “transferStarted” custom event. You can name the event anything you like.
  3. Live-binding “transferStarted” custom event with a event handler function. Let’s call it handleEffectStarted(). Live-binding the important, since the moving element does not exists on the document on page loaded.
  4. In handleEffectStarted(), you are free to create any DOM elements inside $(“#transferElem”).

In my case, I want the moving element contains a person’s image, as if the photo is moving from on place to another. So I dynamically created an <img> in handleEffectStarted(), where the img src is the person’s photo.

This entry was posted in JavaScript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s