I tweaked the sample you linked to so that layers are faded in/out when you click a button: http://jsfiddle.net/swingley/ew8VY/The code is available there but here it is again for convenience:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>FeatureLayer On Demand</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">djConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var mapLayers = []; //array of layers in client map
var map;
function init() {
var extent = new esri.geometry.Extent({"xmin":-96.6063,"ymin":38.3106,"xmax":-96.4764,
"ymax":38.3689,"spatialReference":{"wkid":4269}});
map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
dojo.connect(map, "onLoad", initOperationalLayer);
var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(imagery);
mapLayers.push(imagery);
}
function initOperationalLayer(map) {
var content = "<b>Type</b>: ${ftype}" +
"<br /><b>Code</b>: ${fcode}";
var infoTemplate = new esri.InfoTemplate("Rivers", content);
var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayer(featureLayer);
map.infoWindow.resize(150,105);
mapLayers.push(featureLayer); //this client side map layer is the maps graphics layer
}
function layerVisibility(layer) {
console.log('clicked button ', layer.opacity);
if (layer.visible) {
fader(layer, 0.9, 'out');
} else {
fader(layer, 0, 'in');
}
}
function fader(layer, op, dir) {
if (dir == 'out') {
if (op > 0) { // fading out
layer.setOpacity(op.toFixed(1));
op-=0.1;
setTimeout(function() {
fader(layer, op, dir);
}, 50);
} else { // fade out finished
layer.hide();
}
} else if (dir == 'in') {
if ( ! layer.visible ) {
layer.show();
}
if (op < 1) { // fading in
layer.setOpacity(op.toFixed(1));
op+=0.1;
setTimeout(function() {
fader(layer, op, dir);
}, 50);
}
}
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div style="position:relative;width:100%;height:100%;">
<div id="map" style="border:1px solid #000;width:100%;height:100%;">
<div style="position:absolute; left:100px; top:10px; z-Index:999;">
<button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Imagery Cached Base Map</button>
<button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrography Operational Graphics Layer</button>
</div>
</div>
</div>
</body>
</html>
The relevant stuff is the layerVisibility function as well as the fader function which is called recursively to get the desired effect. This seems like more of a novelty than anything and I doubt it works in IE...I only tested in Chrome.