Skip to Content | Skip to Navigation

dojox.widget.rotator.Fade ¶

Authors:	Chris Barber
Project owner:	Chris Barber
Available:	since V1.4

Contents

dojox.widget.rotator.Fade
- Usage
- Examples
- See also

A fade and cross-fade transition for a dojox.widget.Rotator or dojox.widget.AutoRotator.

Usage ¶

The fade rotator transition is not an instantiated object, but rather a series of functions which consist of:

fade() - Returns a dojo.Animation that fades out the current pane, then fades in the next pane.
crossFade() - Returns a dojo.Animation that cross-fades two rotator panes.

These functions are invoked by the rotator and may be different per pane.

Each function is passed an object containing the “transitionParams” along with the rotator’s current and next pane which are to be panned, then returns a dojo.Animation object describing the animated sequence.

Examples ¶

Programmatic example¶

Example using the fade transition.

Declarative example¶

Example using cross-fade transition.

See also ¶

dojox.widget.Rotator rotates through a series of panes using a transitions.
dojox.widget.AutoRotator adds automatic rotating to a Rotator.
dojox.widget.rotator.Pan is a pan and continuous pan transition for the Rotator.
dojox.widget.rotator.Slide is a sliding transition for the Rotator.
dojox.widget.rotator.Wipe is a wiping transition for the Rotator.

Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <style type="text/css">
            .rotator{ background-color:#fff; border:solid 1px #e5e5e5; width:400px;
            height:180px; overflow:hidden; } .pane{ background-color:#fff; width:400px;
            height:180px; overflow:hidden; padding: 10px; } .pane0{ background-color:#fff79e;
            } .pane1{ background-color:#ffd4a0; } .pane2{ background-color:#ffa0a0;
            }
        </style>
    </head>
    
    <body class="tundra ">
        <div id="myAutoRotator1" class="rotator">
        </div>
        <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">
            Prev
        </button>
        <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 0]);">
            Go 1
        </button>
        <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 1]);">
            Go 2
        </button>
        <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 2]);">
            Go 3
        </button>
        <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">
            Next
        </button>
    </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (window.pub) {
                window.pub();
            }
        });
    </script>

</html>

Copy to clipboard

<div id="myAutoRotator1" class="rotator">
</div>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">
    Prev
</button>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 0]);">
    Go 1
</button>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 1]);">
    Go 2
</button>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['go', 2]);">
    Go 3
</button>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">
    Next
</button>

Copy to clipboard

version:	local

<style type="text/css">
    .rotator{ background-color:#fff; border:solid 1px #e5e5e5; width:400px;
    height:180px; overflow:hidden; } .pane{ background-color:#fff; width:400px;
    height:180px; overflow:hidden; padding: 10px; } .pane0{ background-color:#fff79e;
    } .pane1{ background-color:#ffd4a0; } .pane2{ background-color:#ffa0a0;
    }
</style>

Theme:

Version:

Language:

Rtl:

Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <style type="text/css">
            .rotator{ background-color:#fff; border:solid 1px #e5e5e5; width:400px;
            height:100px; overflow:hidden; } .pane{ background-color:#fff; width:400px;
            height:100px; overflow:hidden; } .pane0{ background-color:#fff79e; } .pane1{
            background-color:#ffd4a0; } .pane2{ background-color:#ffa0a0; }
        </style>
    </head>
    
    <body class="tundra ">
        <div dojoType="dojox.widget.AutoRotator" class="rotator" id="myAutoRotator2"
        jsId="myAutoRotatorInstance2" transition="dojox.widget.rotator.crossFade"
        duration="2500">
            <div class="pane pane0">
                Pane 0
            </div>
            <div class="pane pane1">
                Pane 1
            </div>
            <div class="pane pane2">
                Pane 2
            </div>
        </div>
        <button onclick="dojo.publish('myAutoRotator2/rotator/control', ['prev']);">
            Prev
        </button>
        <button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 0]);">
            Go 1
        </button>
        <button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 1]);">
            Go 2
        </button>
        <button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 2]);">
            Go 3
        </button>
        <button onclick="dojo.publish('myAutoRotator2/rotator/control', ['next']);">
            Next
        </button>
    </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (window.pub) {
                window.pub();
            }
        });
    </script>

</html>

Copy to clipboard

<div dojoType="dojox.widget.AutoRotator" class="rotator" id="myAutoRotator2"
jsId="myAutoRotatorInstance2" transition="dojox.widget.rotator.crossFade"
duration="2500">
    <div class="pane pane0">
        Pane 0
    </div>
    <div class="pane pane1">
        Pane 1
    </div>
    <div class="pane pane2">
        Pane 2
    </div>
</div>
<button onclick="dojo.publish('myAutoRotator2/rotator/control', ['prev']);">
    Prev
</button>
<button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 0]);">
    Go 1
</button>
<button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 1]);">
    Go 2
</button>
<button onclick="dojo.publish('myAutoRotator2/rotator/control', ['go', 2]);">
    Go 3
</button>
<button onclick="dojo.publish('myAutoRotator2/rotator/control', ['next']);">
    Next
</button>

Copy to clipboard

version:	local

<style type="text/css">
    .rotator{ background-color:#fff; border:solid 1px #e5e5e5; width:400px;
    height:100px; overflow:hidden; } .pane{ background-color:#fff; width:400px;
    height:100px; overflow:hidden; } .pane0{ background-color:#fff79e; } .pane1{
    background-color:#ffd4a0; } .pane2{ background-color:#ffa0a0; }
</style>