visibility

by jwerre

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box no-visible"></div>
<div class="box no-opacity"></div>
<div class="box no-display"></div>

CSS

.box {
   display: inline-block;
   width: 200px;
   height: 200px;
   background-color: green;
   margin: 10px;
}

.no-visible {
  visibility: hidden;
}

.no-opacity {
  opacity: 0;
}

.no-display {
  display: none;
}

JavaScript

var $noVisible = $('.no-visible'),
		$noOpacity = $('.no-opacity'),
		$noDisplay = $('.no-display');
    
console.log( 'noVisible:', $noVisible.css('background-color') );
console.log( 'noOpacity:', $noOpacity.css('background-color') );
console.log( 'noDisplay:', $noDisplay.css('background-color') );

/* $noOpacity.css({'opacity': .1}) */

/* console.log( 'noOpacity:', $noOpacity.css('background-color') ); */