<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transfer</title>
<script type="text/javascript" src="../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../fx.js"></script>
<script type="text/javascript" src="../fx.transfer.js"></script>
<style type="text/css" media="screen">
body {
font-size: 10px;
font-family: Arial;
margin:0; padding:0;
}
.controls {font-size:12px;width:510px;margin:0 auto;border:1px solid #ccc;}
.controls a {display:block; width:150px;float:left;}
.controls div {padding:10px;clear:both;}
.text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
#container {height:420px; width:510px; margin:0 auto;}
#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;}
.transfer1 {border:1px solid #666;}
.transfer2 {border:3px dotted #ccc;}
.transfer3 {
border: 1px solid #BBEF68;
background-color: #ffc;
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div id="container">
<div class="text">Header Content</div>
<div id="fx">
<div style='padding:2px;'>Transfer To Me!</div>
<img src="images/very-cute-puppy.jpg">
<div style='padding:2px;'>What a <b>cute</b> puppy!</div>
</div>
<div class="text">Footer Content</div>
</div>
<div class="controls">
<div>
<a href="#" onClick="$(this).effect('transfer', {to: '#fx', className:'transfer1' }, 500);return false;">Transfer</a>
<a href="#" onClick="$(this).effect('transfer', {to: '#fx', className:'transfer2' }, 500);return false;">Transfer</a>
<a href="#" onClick="$(this).effect('transfer', {to: '#fx', className:'transfer3' }, 800);return false;">Transfer</a>
</div>
<div style="clear:both;padding-bottom:5px;"></div>
</div>
</body>
</html>
) is private.
