Spry

Attach a Fade effect

The Fade effect makes an element appear or fade away.

You can attach the Fade effect to any HTML element except applet, body, iframe, object, tr, tbody, or th.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script  src="../includes/SpryEffects.js" type="text/javascript" ></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.

    The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.

  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div class="demoDiv" id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  3. To create the effect, add a JavaScript event that causes the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to fade, you might add the following event to the sentence’s p tag:
    <p><a onclick="Spry.Effect.DoFade('fade1', {duration:1000,from:100,to:20,toggle:true}); return false;" href="#"> Click here to make the paragraph fade from 100% to 20%.</a></p>

    The first argument of the JavaScript method is always the target element’s ID ('fade1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . . 
    <script  src="../includes/SpryEffects.js" type="text/javascript" ></script>
    </head>
    <body>
    <p><a onclick="Spry.Effect.DoFade('fade1', {duration:1000,from:100,to:20,toggle:true}); return false;" href="#"> Click here to make the paragraph fade from 100% to 20%.</a></p>
    <div class="demoDiv" id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    </body>

Fade effect options

The following table lists available options for the Fade effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start opacity value in %. The default value is 0.

to

End opacity value in %. The default value is 100.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition: linear (transition speed is constant for the duration of the transition) or sinusoidal (effect begins slowly, then speeds up, then slows again at the end). The default is sinusoidal.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

Spry.Effect.DoFade('targetID',{duration: 1000,from: 0,to: 100,toggle: true});

Comments

Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS5FDE46A0-828F-4bff-AD3F-3389AE1FA1A5.html