Latest web development tutorials

jQuery UI API - transfer effects (Transfer Effect)

category

Special effects (Effects)

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>