Adding Transitions (Windows CE 5.0)

Send Feedback

By using transitions, Web designers can readily implement visual effects on their Web pages by using HTML and simple script code. Transitions are useful in situations where you want to render content on a page progressively. For example, you can use transitions in a slide show to navigate from one slide to the next.

The following table shows the supported transitions in Microsoft® Windows® CE with a description of the purpose of each.

To implement a transition effect on an object

1. Define the object and specify the desired transition.

   1. Set the DIV ID attribute and define the layout for the image by setting the Style attribute. The following code shows how to set the height, width, and background properties for the image.

      <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
      

   2. Apply the Fade transition and set the duration of the effect. The following code shows how to specify the transition and the duration of the effect.

      filter:progid:DXImageTransform.Microsoft.Fade(duration=2);">
      

2. Write a function to start the transition within <SCRIPT>...</SCRIPT> tags.

   The following code implements an example function, fnApplyFade, that toggles the background color from "gold" to "blue" and completes the transition by calling the play (Internet Explorer) method.

   //Declare a Boolean variable to store transition state.
   var bToggle = 0;
   fnApplyFade()
   {
     //Apply the transition without causing an immediate repaint, 
     //by calling the apply method. 
     oDiv.filters[0].Apply();
     //Implement the necessary transition changes. 
     if (bToggle)
     {
       bToggle = 0;
       oDiv.style.backgroundColor="gold";
     }
     else
     {
       bToggle = 1;
       oDiv.style.backgroundColor="blue";
     }
     //Call the play method to complete the transition.
     oDiv.filters[0].Play();
   }
   

3. Call the function. The following example code invokes the transition effect by calling the fnApplyFade function in the onclick event of a button.

   <BUTTON onclick="fnApplyFade()">Toggle Transition</BUTTON><BR/><BR/>
   

See the output.

For more information about the supported transitions, see this Microsoft Web site.

See Also

Adding Filters and Transitions

Send Feedback on this topic to the authors

Feedback FAQs

© 2006 Microsoft Corporation. All rights reserved.