Effects Demo SourceBack to DemosReturn to Effects Demo

  <div  class="content_pane2" id="product_box2">

  	<!-- NOTE: nested divs required for slide effect-->

  	<div class="content_pane" id="product_box"></div>

  </div>
  <div id="text_pane">Click on the buttons to see the effects. Most buttons toggle the effects, so click again to reverse the effect. </div>
  <div class="navigation_pane" id="effectsControls">

	<div class="effectsTransport_1" id="effectsTransport"><a href="#" onclick="Spry.Effect.AppearFade('product_box', {duration: 1000, from: 100, to: 0, toggle: true}); ExampleHelpText('Makes an HTML element appear or fade away.')" title="Appear">Appear / Fade</a></div>

	<div class="effectsTransport_2" id="effectsTransport"><a href="#" onclick="Spry.Effect.Blind('product_box', {duration: 1000, from: '0%', to: '100%', toggle: true}); ExampleHelpText('Simulates a window blind up/down. The contents of the affected HTML element stay in place.')" title="Blind">Blind</a></div>

	<div class="effectsTransport_3" id="effectsTransport"><a href="#" onclick="Spry.Effect.Slide('product_box2', {duration: 1000, from: '404px', to: '0px', toggle: true}); ExampleHelpText('Simulates a window scroll. The contents of the affected HTML element are scrolled up/down.')" title="Slide">Slide</a></div>

	<div class="effectsTransport_4" id="effectsTransport"><a href="#" onclick="Spry.Effect.Squish('product_box'); ExampleHelpText('Moves an HTML element into or extends it from its upper left corner.')" title="Squish">Squish</a></div>

	<div class="effectsTransport_5" id="effectsTransport" onclick="Spry.Effect.GrowShrink('product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}); ExampleHelpText('shrinks or grows the specified html element.');"><a href="#" onclick="" title="Grow">Grow / Shrink</a></div>

	<div class="effectsTransport_6" id="effectsTransport"><a href="#" onclick="Spry.Effect.Shake('product_box'); ExampleHelpText('Moves the specified HTML element left and right in a rapid manner.')" title="Shake">Shake</a></div>

	<div class="effectsTransport_7" id="effectsTransport"><a href="#" onclick="Spry.Effect.Highlight('text_pane', {duration: 1500, from: '#000000', to: '#805600', restoreColor: '#805600', toggle:true}); ExampleHelpText('Flashes a color as the background of an HTML element.')" title="Hilite">Hilite</a></div>

	<div class="effectsTransport_8" id="effectsTransport"><a href="#" onclick="Spry.Effect.AppearFade('product_box', {duration: 2000, from: 100, to: 0, toggle: true}); Spry.Effect.Blind('product_box', {duration: 1000, from: '100%', to: '0%', toggle: true}); ExampleHelpText('Combined appear and blind effect.')" title="Appear Blind">Appear &amp; Blind</a></div>

	<div class="effectsTransport_9" id="effectsTransport"><a href="#" onclick="Spry.Effect.AppearFade('product_box', {duration: 2000, from: 100, to: 0, toggle: true}); Spry.Effect.Slide('product_box2', {duration: 1000, from: '404px', to: '0px', toggle: true}); ExampleHelpText('Combined appear and slide effect.')" title="AppearSlide">Appear &amp; Slide</a></div> 

	<div class="effectsReload_0" id="effectsReload"><a href="#" onclick="ReloadDocument()" title="Reload">Reload</a></div>

  </div>