Transfer Effect

http://api.jqueryui.com/1.10/transfer-effect/

ある要素から別の要素へ外枠が遷移するようなエフェクトを表現します。

transfer

引数説明

className

引数	説明
className	型：`String` 遷移アニメーションする要素のclass名を指定します。
to	型：`String` 遷移先の要素をセレクタで指定します。

型：String

遷移アニメーションする要素のclass名を指定します。

型：String

遷移先の要素をセレクタで指定します。

2つの要素間の相互作用を視覚的に見せたい際に非常に有用です。遷移アニメーションの要素はui-effects-transferのclassを持ちます。

サンプル

<!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>