Time for action – transferring the outline of one element to another

In this example we'll recreate a popular application installation dialog from OSX, and use the transfer effect to help show visitors where to drag the icon (the icon won't actually be draggable, all we're doing is looking at the transfer effect).

  1. Add the following elements to the <body> of the template file to create the install dialog:
    <div id="install">
  <div id="firefox"><!-- --></div>
  <div id="apps"><!-- --></div>
</div>
<p>To install the application, drag its icon over to the apps folder icon.</p>
<button id="show">Show me</button>
  2. Add the following script to the empty function at the bottom of the template file:
    $("#show").click(function() { $("#firefox").effect("transfer", ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial