title: How do I create a mouseover animation using Snap SVG?
body: <p>I am creating a hover map animation using <code>Snap.svg</code>, but I seem to be having problems with the animation portion.  The map was created in <code>Illustrator</code> and exported as an <code>SVG</code> file and is linked to an <code>HTML</code> page.</p>
  
  <p>Once I add the code below, everything disappears.</p>
  
  <pre><code>veryCold.mouseover(function() {
      this.animate({
          fill: "#ff0000"
      }, 600);
  }).mouseout(function() {
      this.animate({
          fill: "#bada55"
      }, 200);
  </code></pre>
  
  <p>I am new to Stack Overflow, so please let me know if you need any additional information.  Any help you can provide will be greatly appreciated.  Thank you!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Snap.svg&lt;/title&gt;
          &lt;style&gt;
          body {
              background: #333;   
              }
          &lt;/style&gt;
          &lt;script src="Snap.svg-0.4.1/dist/snap.svg.js"&gt;&lt;/script&gt;
          &lt;script src="Snap.svg-0.4.1/dist/snap-min.svg.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;svg width="0" height="0"&gt;
  
          &lt;/svg&gt;
          &lt;script&gt;
              var s = Snap(1080, 700);
  
              Snap.load("BuildingAmerica_ClimateMap_Vector-CJ-20150129-Buttons.svg", function(f) {
                  var g = f.selectAll("g"),
                      wra = f.selectAll("path[class='st0']").attr({display: "none",}),
                      wrb = f.selectAll("path[class='st1']").attr({display: "inline", fill: "#FFFFFF"}),
                      wrc = f.selectAll("path[class='st2']").attr({"opacity": 0.75}),
                      wrd = f.selectAll("path[class='st3']").attr({fill: "#63B1C0"}),
                      wre = f.selectAll("path[class='st4']").attr({"opacity": 0, fill: "#63B1C0"}),
                      wrf = f.selectAll("path[class='st5']").attr({fill: "#C97F4C"}),
                      wrg = f.selectAll("path[class='st6']").attr({fill: "#B25415"}),
                      wrh = f.selectAll("path[class='st7']").attr({fill: "#C87D4B"}),
                      wri = f.selectAll("path[class='st8']").attr({"opacity": 0, fill: "#C97F4C"}),
                      wrj = f.selectAll("path[class='st9']").attr({fill: "#8CB533"}),
                      wrk = f.selectAll("path[class='st10']").attr({"opacity": 0, fill: "#8CB533"}),
                      wrl = f.selectAll("path[class='st11']").attr({fill: "#EEA135"}),
                      wrm = f.selectAll("path[class='st12']").attr({"opacity": 0, fill: "#EEA135"}),
                      wrn = f.selectAll("path[class='st13']").attr({fill: "#6D7CBC"}),
                      wro = f.selectAll("path[class='st14']").attr({fill: "#323E96"}),
                      wrp = f.selectAll("path[class='st15']").attr({fill: "#333B97"}),
                      wrq = f.selectAll("path[class='st16']").attr({"opacity": 0, fill:"#6D7CBC"}),
                      wrr = f.selectAll("path[class='st17']").attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 0.2709}),
                      wrs = f.selectAll("path[class='st18']").attr({fill: "none", stroke: "#000000", strokeWidth: 0.4});
  
                  s.append(g);
                  s.append(wrb);
                  s.append(wra);
                  s.append(wrc);
  
                  var veryCold = s.group(wrn, wro, wrp, wrq);
                  veryCold.mouseover(function() {
                      this.animate({
                          fill: "#ff0000"
                          }, 600);
                      }).mouseout(function() {
                      this.animate({
                          fill: "#bada55"
                          }, 200);
  
                  var mixedHumid = s.group(wrj, wrk);
                  var hotHumid = s.group(wrl, wrm);
                  var hotDry = s.group(wrf, wrg, wrh, wri);
                  var marine = s.group(wrd, wre);
  
                  s.append(wrr);
                  s.append(wrs);
              });
          &lt;/script&gt;
        &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>