<?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>Blind</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.blind.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;}
</style>
</head>
<body>
<div id="container">
<div class="text">Header Content</div>
<div id="fx">
<div style='padding:2px;'>Blind 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="$('#fx').hide('blind', { direction: 'vertical' });return false;">Blind up</a>
<a href="#" onClick="$('#fx').show('blind', { direction: 'vertical' });return false;">Blind down</a>
<a href="#" onClick="$('#fx').toggle('blind', { direction: 'vertical' });return false;">Blind toggle vertical</a>
</div>
<div>
<a href="#" onClick="$('#fx').hide('blind', { direction: 'horizontal' });return false;">Blind left</a>
<a href="#" onClick="$('#fx').show('blind', { direction: 'horizontal' });return false;">Blind right</a>
<a href="#" onClick="$('#fx').toggle('blind', { direction: 'horizontal' });return false;">Blind toggle horizontal</a>
</div>
<div style="clear:both;padding-bottom:5px;"></div>
</div>
</body>
</html>
) is private.
