title: JavaScript/jQuery: How to trigger an event when "display: none" is removed?
body: <p>I apologize if this was answered previously, I couldn't find it using the search.</p>
  
  <p>I have to tag 4 elements to fire off an event when they are unhidden ("display: none" is removed).  I think a mutationObserver is the right way to go, but am having trouble filtering to just the event I need.</p>
  
  <p>Anyone have experience doing this?</p>
  
  <p>Edit:  Unfortunately, we do not have access to the script actually unhiding the elements.  They are owned and protected by another team.  The only thing we can key on is when the element is unhidden. </p>
  
  <p>I was trying to figure out how to edit this for my needs.</p>
  
  <pre><code>    // Blocker is the element that has a changing display value
  var blocker  = document.querySelector( '#blocker' );
  // Trigger changes the display value of blocker
  var trigger  = document.querySelector( '#trigger' );
  // Our mutation observer, which we attach to blocker later
  var observer = new MutationObserver( function( mutations ){
      mutations.forEach( function( mutation ){
          // Was it the style attribute that changed? (Maybe a classname or other attribute change could do this too? You might want to remove the attribute condition) Is display set to 'none'?
          if( mutation.attributeName === 'style' &amp;&amp; window.getComputedStyle( blocker ).getPropertyValue( 'display' ) !== 'none'
            ){
              alert( '#blocker\'s style just changed, and its display value is no longer \'none\'' );
          }
      } );
  } );
  
  // Attach the mutation observer to blocker, and only when attribute values change
  observer.observe( blocker, { attributes: true } );
  
  // Make trigger change the style attribute of blocker
  trigger.addEventListener( 'click', function(){
      blocker.removeAttribute( 'style' );
  }, false );
  </code></pre>