jQuery ui has an effects plugin which is pretty cool, making simple animations possible with minimal code and without the need to install browser plugins such flash. You can see all these in action on their website.

One such effect is called Transfer, which displays a neat little transfer effect linking an element to a target. The way it currently works is it creates a helper div element with the class ui-effects-transfer, moves and resizes it to the specified target element.

When I was playing around with this effect for a project, I thought it would be cool if instead of creating a helper div, it could clone the original element, giving the impression that the element is actually moving to the target.

Turns out this is actually really easy to do, and can be accomplished by just adding 1 line to the original code!

Original Code:

/*!
* jQuery UI Effects Transfer 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Effects/Transfer
*
* Depends:
* jquery.effects.core.js
*/
(function( $, undefined ) {

$.effects.transfer = function(o) {
  return this.queue(function() {
  var elem = $(this),
  target = $(o.options.to),
  endPosition = target.offset(),
  animation = {
  top: endPosition.top,
  left: endPosition.left,
  height: target.innerHeight(),
  width: target.innerWidth()
},
startPosition = elem.offset(),
transfer = $('

‘) .appendTo(document.body) .addClass(o.options.className) .css({ top: startPosition.top, left: startPosition.left, height: elem.innerHeight(), width: elem.innerWidth(), position: ‘absolute’ }) .animate(animation, o.duration, o.options.easing, function() { transfer.remove(); (o.callback && o.callback.apply(elem[0], arguments)); elem.dequeue(); }); }); }; })(jQuery);

Changes

Right so we need to pass a clone option through, so just below line 17 add the following line:

clone = $( o.options.clone ) || $('

‘ ),

With this new clone variable we pass through the clone element, or if it’s not been defined, create a new div element with the ui-effects-transfer class.

Then on line 27, replace:

transfer = $('

‘)

with:

transfer = clone

Example Use

var transferHelper = $('#effectElement').clone();

$('#effectElement').effect( 'transfer', {
	clone: transferHelper,
	to: $('#elementToTransferTo')
}, 500, function(){

	// Callback function

}, );