Fadein Vs Fadeto

November 27, 2023 Post a Comment

My site makes use of Google maps. The map itself should be displayed once completely loaded. This is where fadeIn() should begin to increase opacity from 0 to 100%. For some reason

Solution 1:

Looks like for fadeIn to work it relies on display none to be set. so because the end result after the animation is not opacity = 1; your div is still not viable.

At the end of the animation with fadeIn the display is set to block and that would show your div correctly. Is there any reason you can't use fadeTo?

Solution 2:

The difference is in the way how both these functions are handling the display properties of the div element.

FadeTo: First shows the element and then animate

returnthis.filter( isHiddenWithinTree ).css( "opacity", 0 ).show()
        // Animate to the value specified
        .end().animate( { opacity: to }, speed, easing, callback );

FadeIn: Shows the element along with the animation

jQuery.fn[ name ] = function( speed, easing, callback ) {
    returnthis.animate( props, speed, easing, callback );
};

Source: https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/effects.js

Google map should be shown in a visible element otherwise it will show unexpected behavior which is what happens in case of FadeIn.

Solution 3:

The Question: FadeIn vs FadeTo (which to prefer)?

MY Answer: Neither!

Come on :) you just want to fade in an element; It's 2017! We don't have to do those very simple tasks with js anymore for years. Of course there are circumstances where you should use js (-frameworks, -libraries, -platforms) but only if it is about fine grained setups with complex sequences and/or extensive user interaction capabilities. And if you ever come accross such a scenario: don't use jQuery for the animation part! For complex animation stuff you can use GSAP (love it and use it a lot), Velocity.js or whatever is designed particularly for animations.

jQuery is great (eg the Deffered/Promise and Ajax stuff, i also use jQuery.type() a lot) but it was never designed to do an at-least-very-good-job in animation (keyword RAF). But back to topic:

your question is about style (opacity) - CSS is about style,
your question is about changing states (aka events) - and only this is the js part.

So let's reconstruct (just a rough mockup see advanced PEN or Snippet below):

HTML | let's markup in states

<!-- states are: transparent and opaque --><divid="map"class="state state--off"></div><!-- compare to <div id="map" class="state state--on"></div> -->

CSS | Keep styling where it belongs to

/* the different states | please consider how reusable this is */.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* WYSIWYG */
}
.state.state--on {
    opacity: 1; /* very clean and straight forward */
}

That's pretty much it.

JS | throw together some logic to deploy the different states

// BTW: no jQuery dependency and no styling at all as wellvar domMap = document.getElementById('map'); // cache DOMelement
google.maps.event.addListenerOnce( // listen once!new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // toggle state in anonymous callback function
    domMap.className = 'state state--on';
  }

);

var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    domMap.className = 'state state--on';
    /* the jQuery way: $(domMap).attr('class', '') or
     * $(domMap).toggleClass('state--on state--off')
     * the latter would be a good one for a generic no brainer toggle function
     * function toggleState( sSelector ) {
     *   return $(sSelector).toggleClass('state--on state--off');
     * }
     * and then one can call toggleState('#map')
     */
  }

);

#map {
    border: 1px solid black;
    height: 350px;
    width: 500px;
}
.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* very clean and straight forward */
}
.state.state--on {
    opacity: 1; /* WYSIWYG */
}

<divid="map"class="state state--off"></div><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Notes

Generic class names for states are better then specific ones. Why? Imagine you want to change your animation from fading in to slide down. If your class name is something like state--transparent and state-opaque - you will find yourself search&replace "transparent" to "up" and "opaque" to "down" (or whatever). And you have to search&replace in hmtl, css and js. With "on" and "off" you don't have to change anything but go to the place where the styling should happen (your styleheets) and redefine what means "on" & "off" to you and your users now.
Must-Read.
Have a look at animates.css if you haven't already.

Can I use? What About Cross-browser?

(93.59%) Forget about this at least for this particular one. Browsers who don't support css3 transition will give imidiate response instead of animated response which is also fine. If you want to provide a fallback you can detect whether its nessecary or not with Modernizr and provide js fallbacks. If you do so: keep it simple and perhaps look for some (not many) powerful tools that you can handle over time. If you want to animate with jQuery then try: $('#map').animate({opacity: 1}, 2000)! Works like a charme - see snippet below.

var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $( domMap ).animate({ opacity: 1}, 2000 )
  }

);

#map {
    border: 1px solid black;
    height: 350px;
    opacity: 0;
    width: 500px;
}

<divid="map"></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Conclusion

Don't waste your time figuring out how to handle someone elses implementation of a generic functionality. Also for me it was hard to debug this jQuery fadeIn - fadeTo implementation! So next time just design a state of an element. Give it an appropriate class name then design your next state, name it. and switch those states via js. This should work for a lot of use cases! Prefer solutions that are elegenat, simple, comprehensible and maintainable. If you find yourself hacking then take a break and try to get back to the basics.

My First Answer | The one that was accepted :)

var $map = $("#map"); // cache element

google.maps.event.addListenerOnce( // listen once!new google.maps.Map(
    $map[0],
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $("#map")
      .css({display: 'none', opacity:1}) // this line is so hacky that it hurts
      .fadeIn(1800);
  }

);

#map {
    height: 350px;
    width: 500px; 
    border: 1px solid black; 
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;    
}

<divid="map"></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Html5 Learning