Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut

Question

I have searched the web high and low and have not been able to find a tutorial or example of using jQuery to fade an InfoBox/InfoWindow in Google Maps not the content the actual

Answer 1

The fadeOut effect can be achieved by adding class and setTimeout. Let me explain.

For example:

$('.close-el')
        .on('click', function(e) {
            e.stopPropagation();
            $(infobox.div_).addClass('is-closing');
            setTimeout(function() {
                infobox.close();
            }, 700);
    }); 

when you add CSS class, and, after end of css transition you close the info box

and CSS (sass) (.infoBox is reserved class)

.infoBox {
    &.is-closing {
        transition: transform 400ms, opacity 400ms;

        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
}