jQuery UI Transfer Effect

Overview

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.

Dependencies

  • Effects Core

Example

Clicking on the green element transfers to the other.

$("div").click(function () {
      var i = 1 - $("div").index(this);
      $(this).effect("transfer", { to: $("div").eq(i) }, 1000);
});



<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.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>
  $(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>

Arguments