Dojo Fade In Effect (Simple actions)

Causes a target control to fade in.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojoFadeIn node="target" duration="ms" loaded="true|false" easing="function" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojoFadeIn>
Table 1. Attributes
Attribute Description
attributes="json" List of JSON formatted values passed as is.
duration="ms" Duration of the animation in milliseconds. Defaults to 350.
easing="function" Function that returns the rate of change of the animation over its duration.
loaded="true|false" Creates a tag instance when the control is loaded, or not. Defaults to true.
node="target" Identifier of the control to which the animation is applied.
var="name" Variable name to identify the animation.

Examples

Here two buttons cause text to fade out and fade in.
<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Fade Out" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeOut node="div1" duration="1500"></xe:dojoFadeOut>
		</xp:this.script>
	</xp:eventHandler></xp:button>
<xp:button value="Fade In" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeIn node="div1" duration="1000"></xe:dojoFadeIn>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>