Spry Slide Effect Samples

The Slide effect default behavior will be to Slide Out the target element from the initial size until the element disappear in 1 second. The Slide effect require the content of the animated element to be wrapped into a single block element.

Think of it as a picture sliding out of a frame.
The picture is the animated element and picture frame is the wrapper DIV. This effect requires the animating element is within a single container tag, such as a DIV.

Toggle

The slide effect after instantiation can be called in different situations by different elements in the page at different times. In this example we animate the same element when you click either a button or a link. The animation can be also started when the mouse is over an element, the page is loaded or on any other page events.

In this example each time the effect is started will toggle the direction because we added "toggle:true" to the constructor.

<script type="text/javascript">
	var slide_toggle = new Spry.Effect.Slide('slideItUp2', {toggle:true});
</script>

Slide Horizontal

The Slide was designed to animate the element vertically or horizontally. By enabling the horizontal option the element will dissapear to its left.

<script type="text/javascript">
	var slide_horiz = new Spry.Effect.Slide('slideItHorizontal', {horizontal: true, toggle: true});
</script>

Duration and Sizing

The duration and the initial/final size of the region to be animated can be controlled with specific options passed to the Slide Effect constructor. The "from" and "to" options represent the percentage size of the initial element size or the absolute value in pixels.

Duration is set in milliseconds.

<script type="text/javascript">
 var slide4 = new Spry.Effect.Slide('slideItDown1', {duration: 2000, from: '0px', to: '200px', toggle: true});
</script>

Initially hidden element

The target animated element can initially be hidden. To hide an element ou can use one of two CSS properties: display and visibility. The difference between these two properties is the way the element while hidden will alter the flow of the page. While using the display: none; the element is completelly removed from page and the other elements will take its place the visibility: hidden will leave the element in the page flow with all the sizes and other behaviours unaltered but the element is simply not seen.

In the following sample we will use the visibility: none; to initially hide the element and using the Slide effect the element will appear in page.

<style type="text/css">
.hideInitially{
	visibility: hidden;
}
</style>
...
<form method="get" action="slide_sample.html">
	<input type="button" onclick="slide_hidden.start();" value="Slide Example" />
</form>

<div class="animationContainer">
	<div class="demoDiv hideInitially" id="example5">
	...
	</div>
</div>
...
<script type="text/javascript">
	var slide_hidden = new Spry.Effect.Slide('example5', {duration: 2000, from: '0%', to: '100%', toggle: true});
</script>

Setup and Finish functions

Sometimes, when using the effects, you need to run some other JavaScript functions before or after the animation. In the constructor you have the possibility to pass two options: "setup" and "finish" with the callback functions which Slide will call automatically.

This example will disable the button while the animation run. The background color of the button will be white during this time.

<script type="text/javascript">
	var animation_start = function(){
		var button = document.getElementById('animation_button');
		if (button){
			button.disabled = true;
			button.style.backgroundColor = '#FFF';
		}
	}

	var animation_stop = function(){
		var button = document.getElementById('animation_button');
		if (button){
			button.disabled = false;
			button.style.backgroundColor = '';
		}
	}

	var slide_func = new Spry.Effect.Slide('slideIt', {toggle:true, setup: animation_start, finish: animation_stop});
</script>