Selection: How to implement fade out effect?

[AlexanderStepanov]

Hi all,

I appreciate if you could point me out to documentation/examples on how to implement the following:

in a web app, a user can make selection via drop down list. I would like to show the selected elements on the map with a highlight color which then fades out. ( so the selection shown only temporally ).

Thank you,
Alexander

[JoeJeurissen]

Dojo has a lot of built in animations such as fade out.

 dojo.fadeOut({
  node:"Your Element",
  duration:700,
  onEnd: function(){
   dojo.style("Your Element", "display", "none");
  }
 }).play();

Some examples can be found here http://dojotoolkit.org/reference-guide/dojo/fadeOut.html

[derekswingley1]

I did something like this a while back in a dijit I built: http://swingley.appspot.com/maps/zoomto

Here's the relevant code:

    // serialize the extent to JSON, create a new extent to later pass to the map
    var featExt = new esri.geometry.Extent(ext.toJson());

    // listen to onExtentChange and then show a 
    // graphic for the selected feature's extent
    this.extHandle = dojo.connect(this.map, 'onExtentChange', this, function() {
      var outline = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 173, 230, 1]), 3),
          symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, outline, new dojo.Color([0, 0, 128, 0])),
          extGraphic = new esri.Graphic(featExt, symbol);
      this.map.graphics.add(extGraphic);
      // fade out the graphic and remove it
      var fo = dojo.fadeOut({
        'node': extGraphic.getDojoShape().getNode(),
        'duration': 1500,
      });
      // remove the graphic and clean up the event listeners
      // after the animation plays
      this.foHandle = dojo.connect(fo, 'onEnd', this, function() {
        this.map.graphics.remove(extGraphic);
        dojo.disconnect(this.extHandle);
        dojo.disconnect(this.foHandle);
      });
      fo.play();
    });

    // set the new extent
    this.map.setExtent(featExt, true);

Another option is to use dojox.gfx.fx to fade out the graphic. Here's an example:  http://jsfiddle.net/swingley/3VsgL/

[ToddPayne]

Dojo has a lot of built in animations such as fade out.

 dojo.fadeOut({
  node:"Your Element",
  duration:700,
  onEnd: function(){
   dojo.style("Your Element", "display", "none");
  }
 }).play();

Some examples can be found here http://dojotoolkit.org/reference-guide/dojo/fadeOut.html

I would just add that the node we are most likely looking for can be referenced from the graphic object that represents the selected feature.  graphic.getDojoShape().getNode()

[AlexanderStepanov]

Thank you, guys!

I will try to implement it and will summarize back on how it worked.

Alexander

[AndrewCorcoran]

Just in case anyone finds this thread at a later date...

The first example swingley gives does not work in Internet Explorer (7, 8 or 9) but the second one using 'dojox.gfx.fx' does. Both versions work in Firefox. I haven't tested in Chrome.

Hope this helps someone as it has taken me quite a while to get it working in IE. Thank you very much swingley 🙂