Transfers the outline of an element to another element. Very useful when trying to visualize interaction between two elements.
The transfer element iself has the class name "ui-effects-transfer", and needs to be styled by you, for example by adding a background or border.
$("div").click(function () { var i = 1 - $("div").index(this); $(this).effect("transfer", { to: $("div").eq(i) }, 1000); });
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script> <script src="http://jqueryui.com/latest/ui/effects.core.js"></script> <script src="http://jqueryui.com/latest/ui/effects.transfer.js"></script> <style type="text/css"> div.green { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; } div.red { margin-top: 10px; width: 50px; height: 30px; background: red; border: 1px solid black; position: relative; } .ui-effects-transfer { border: 2px solid black; } </style> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { var i = 1 - $("div").index(this); $(this).effect("transfer", { to: $("div").eq(i) }, 1000); }); }); </script> </head> <body style="font-size:62.5%;"> <div class="green"></div> <div class="red"></div> </body> </html>