Transfer
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.5/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>