Fade In Out - CSS JQuery

For smooth fade in-out transitions. Helps keep frame rate as compared to JQuery FadeIn function. Works well on HTML5 applications.

HTML

<button id="button_1">Fade in 1</button>
<button id="button_2">Fade in 2</button>
<div class="square"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 0.5s ease-in-out;
    display: none;
}

JavaScript

var $square = $('.square');

$('#button_1').on("click", function() {
		$('.square').css('opacity', '0');
    $('.square').css('display', 'block');
    setTimeout(function() {
       $('.square').css('opacity', '1');
    }, 50);
});
$('#button_2').on("click", function() {
  $('.square').css('opacity', '0');
    setTimeout(function() {
        $('.square').css('display', 'none');
    },500);
});