JavaScript + Ajax 実践サンプル集 - Effects General(Transfer)

Effects General(Transfer)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのeffect()プラグインを利用してtransferエフェクトを実装しています。サンプルのボックスの見出し「Transfer」をクリックするとボックスが左下のボックスに吸い込まれるように移動(転写)します。

このサンプルを編集して試してみる

$("#transfer").click(function() {   
  $(this).effect("transfer", {   
    to: "#transfer-target"  
  });   
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Effects - Transfer Demo</title>
<link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />  
<link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.ui-effects-transfer { border: 2px dotted gray; } 
	#transfer { width: 240px; height: 135px; padding: 0.4em; }
	#transfer h3 { margin: 0; padding: 0.4em; text-align: center; }
	#transfer-target { width: 80px; height: 80px; margin-top: 80px; }
</style>
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/UI/effects.core.js" type="text/javascript"></script>
<script src="jQuery/UI/effects.transfer.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("#transfer").click(function() {
      $(this).effect("transfer", {
        to: "#transfer-target"
      });
    });
  });
</script>
</head>
<body>

<div id="transfer" class="ui-widget-content ui-corner-all">
	  <h3 class="ui-widget-header ui-corner-all">Transfer</h3>
	  <p>
      Lorem ipsum quo ex duis probo appetere, alii splendide ullamcorper te per. 
      Nibh feugiat nec id, has ne atqui diceret copiosae. 
      Solet aperiri repudiandae eam ut, te probo vitae aliquid sit.
	  </p>
  </div>

</div>

</body>
</html>