## Transfer Effect

Description: Transfers the outline of an element to another element

- #### transfer

  - className
    Type: String
    argumental class name the transfer element will receive.
  - to
    Type: String
    jQuery selector, the element to transfer to.

Very useful when trying to visualize interaction between two elements.

The transfer element iself has the class `ui-effects-transfer`, and needs to be styled by you, for example by adding a background or border.

## Example:

#### Clicking on the green element transfers to the other.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

`<!doctype html>`
`<``html` `lang``=``"en"``>`
`<``head``>`
`` `<``meta` `charset``=``"utf-8"``>`
`` `<``title``>transfer demo</``title``>`
`` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.2/themes/base/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``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/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``>`

#### Demo: