|
| 1 | +<?xml version="1.0"?> |
| 2 | +<entry name="transfer" type="method" return="jQuery"> |
| 3 | + <title>.transfer()</title> |
| 4 | + <desc>Transfers the outline of an element to another element</desc> |
| 5 | + <longdesc> |
| 6 | + <p>Very useful when trying to visualize interaction between two elements.</p> |
| 7 | + <p>The transfer element itself has the class <code>ui-effects-transfer</code>, and needs to be styled by you, for example by adding a background or border.</p> |
| 8 | + </longdesc> |
| 9 | + <signature> |
| 10 | + <argument name="options" type="Object"> |
| 11 | + <property name="to" type="Selector"> |
| 12 | + <desc>The target of the transfer effect.</desc> |
| 13 | + </property> |
| 14 | + <property name="className" type="String" default="null"> |
| 15 | + <desc>A class to add to the transfer element, in addition to <code>ui-effects-transfer</code>.</desc> |
| 16 | + </property> |
| 17 | + <property name="duration" default="400"> |
| 18 | + <desc>A string or number determining how long the animation will run. The strings <code>"fast"</code> and <code>"slow"</code> can be supplied to indicate durations of 200 and 600 milliseconds, respectively. The number type indicates the duration in milliseconds.</desc> |
| 19 | + <type name="Number"/> |
| 20 | + <type name="String"/> |
| 21 | + </property> |
| 22 | + <property name="easing" type="String" default="swing"> |
| 23 | + <desc>A string indicating which <a href="/easings/">easing</a> function to use for the transition.</desc> |
| 24 | + </property> |
| 25 | + </argument> |
| 26 | + <xi:include href="../includes/animation-argument-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/> |
| 27 | + </signature> |
| 28 | + <example> |
| 29 | + <height>150</height> |
| 30 | + <desc>Clicking on the green element transfers to the other.</desc> |
| 31 | + <css><![CDATA[ |
| 32 | + .green { |
| 33 | + width: 100px; |
| 34 | + height: 80px; |
| 35 | + background: green; |
| 36 | + border: 1px solid black; |
| 37 | + } |
| 38 | + .red { |
| 39 | + margin-top: 10px; |
| 40 | + width: 50px; |
| 41 | + height: 30px; |
| 42 | + background: red; |
| 43 | + border: 1px solid black; |
| 44 | + } |
| 45 | + .ui-effects-transfer { |
| 46 | + border: 1px dotted black; |
| 47 | + } |
| 48 | +]]></css> |
| 49 | + <code><![CDATA[ |
| 50 | +$( "div" ).click(function() { |
| 51 | + var i = 1 - $( "div" ).index( this ); |
| 52 | + $( this ).transfer( { |
| 53 | + to: $( "div" ).eq( i ), |
| 54 | + duration: 1000 |
| 55 | + } ); |
| 56 | +}); |
| 57 | +]]></code> |
| 58 | + <html><![CDATA[ |
| 59 | +<div class="green"></div> |
| 60 | +<div class="red"></div> |
| 61 | +]]></html> |
| 62 | + </example> |
| 63 | + <category slug="effects"/> |
| 64 | + <category slug="effects-core"/> |
| 65 | +</entry> |
0 commit comments