jQuery UI API - transfer effects (Transfer Effect)
category
usage
Description: The contour element to another element.
transfer
参数 | 类型 | 描述 |
---|---|---|
className | String | 转移的元素将接收的参数化的 class 名称。 |
to | String | jQuery 选择器,要转移到的元素。 |
When trying to visualize the interaction between two elements is very useful.
Transfer element with itself, class ui-effects-transfer
, other styles need to be defined by you, for example, add a background or border.
Examples
Click on the green element transfer it to another element.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> transfer effects (Transfer Effect) Demo </ 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>