title: Google Maps fade in InfoBox content with jQuery
body: <p>I have a bunch of markers on my map and I would like an image to fade in whenever you hover over each marker.</p>
  
  <p>So far the InfoBox itself has no background image to appear invisible, with the jQuery effect being applied to the image once the InfoBox is open, but I can't get the effect to trigger when I use the same mouseover event to show open the InfoBox. It works when I use a 'click' event with a separate DOM listener but for some reason a mouseover event doesn't trigger it.</p>
  
  <p>Here's the snippet of code that I'm trying to get to work (where ".hello" is set to "opacity:0"):</p>
  
  <pre><code>var infoBox = new InfoBox({myLatlng: marker.getPosition(), map: map}); 
  
  google.maps.event.addListener(marker, 'mouseover', function (){
      infoBox.open(map, this);
      infoBox.setContent('&lt;div id="content"&gt;&lt;img class="hello" src="css/images/office.png" alt="" /&gt;&lt;/div&gt;');
      $(".hello").animate({opacity: 1},200);
  });   
  </code></pre>
  
  <p>Using a 'click' event instead works with a separate DomListener, but not with mouseover:</p>
  
  <pre><code>google.maps.event.addDomListener(marker, 'click', function() {
      $(".hello").animate({opacity: 1},200);
  });
  </code></pre>
  
  <p>How can I achieve the desired effect?</p>