opacity

HTML

<button type="button" onclick="toggle()">Draw</button>
	<br>
	<div class="testDiv hide"></div>
        
        <script>
           $(document).ready(function(){
            $('.testDiv').css({
    '-webkit-transform': 'scale(0)',
    '-moz-transform': 'scale(0)',
    '-o-transform': 'scale(0)'
});
            });
		function toggle () {
            
            $('.testDiv').css({
       'transition': '0s',     
    '-webkit-transform': 'scale(0)',
    '-moz-transform': 'scale(0)',
    '-o-transform': 'scale(0)'
});
			if ($(".testDiv").hasClass("hide") == true) {
				$(".testDiv").removeClass("hide") ; 
                                               
                $('.testDiv').css({
            'transition': '1s', 
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)',
    '-o-transform': 'scale(1)'
});
			}
			else  {
            $('.testDiv').css({
       'transition': '1s'
});
				$(".testDiv").addClass("hide") ;
			}
            
		}
	</script>

CSS

.testDiv {
			display:block ;
			background-color : blue  ; 
			overflow : hidden ; 
			height : 400px ; 
			width : 500px ; 
			opacity : 1 ;
            transition: 1s;
			-webkit-transition:  opacity 1s ease-in-out ,  -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
			transition:  opacity 1s ease-in-out , transform 2s;
		}
		.testDiv.hide {
			opacity: 0 ;
		}