jQuery UI API - Transfer Effect

Category

Effects

Usage

Description:Transfer the outline of one element to another element.

transfer

Parameters Type Description
className String The parameterized class name that the transferred element will receive.
to String jQuery selector, the element to transfer to.

Useful when trying visual interaction between two elements.

The transferred element itself carries classui-effects-transfer, other styles need to be defined by you, such as adding background or border.

Examples

Click on the green element to transfer it to another element.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>转移特效（Transfer Effect）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div.green {
    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: 1px dotted black;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div class="green"></div>
<div class="red"></div>
 
<script>
$( "div" ).click(function() {
  var i = 1 - $( "div" ).index( this );
  $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
});
</script>
 
</body>
</html>

Other extensions