Processing...
Description & Source Code

Visual effects can be handled by jQuery at the client side without making requests to the server.

jQuery_effects.zul
<hlayout width="600px">
	<separator width="150px"></separator>
	<window id="effectTarget" title="This is a Window" border="normal" width="300px">
		<vlayout style="text-align:center;">
			<image src="/widgets/effects/jQuery_effects/img/magic_wand_hat.png"></image>
			jQuery Effect Test
		</vlayout>
	</window>
</hlayout>
jQuery_effects_ctrl.zul
<groupbox closable="false" sclass="z-demo-config" xmlns:w='client'>
	<caption label="Effect" />
	<vlayout>
		<button height="30px" width="100%" label="Slide Down" 
			w:onClick="jq('$effectTarget').hide().slideDown(1000)" />
		<button height="30px" width="100%" label="Slide Up" 
			w:onClick="jq('$effectTarget').show().slideUp(1000)" />
		<button height="30px" width="100%" label="Fade In" 
			w:onClick="jq('$effectTarget').hide().fadeIn()" />
		<button height="30px" width="100%" label="Fade Out" 
			w:onClick="jq('$effectTarget').show().fadeOut()" />
		<button height="30px" width="100%" label="Slide Toggle" 
			w:onClick="jq('$effectTarget').slideToggle(1000)" />
	</vlayout>
</groupbox>