Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strike>There are no events in JQuery to detect css changes.<br> Refer here: <a href="https://stackoverflow.com/questions/2857900/onhide-type-event-in-jquery">onHide() type event in jQuery</a></strike><br> It is possible:</p> <blockquote> <p>DOM L2 Events module defines mutation events; one of them - DOMAttrModified is the one you need. Granted, these are not widely implemented, but are <strong>supported in at least Gecko and Opera</strong> browsers.<br> Source: <a href="https://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery">Event detect when css property changed using Jquery</a> </p> </blockquote> <p>Without events, you can use <code>setInterval</code> function, like this:</p> <pre><code>var maxTime = 5000, // 5 seconds startTime = Date.now(); var interval = setInterval(function () { if ($('#element').is(':visible')) { // visible, do something clearInterval(interval); } else { // still hidden if (Date.now() - startTime &gt; maxTime) { // hidden even after 'maxTime'. stop checking. clearInterval(interval); } } }, 100 // 0.1 second (wait time between checks) ); </code></pre> <p>Note that using <code>setInterval</code> this way, for keeping a watch, may affect your page's performance.</p> <p><strong>7th July 2018:</strong><br> Since this answer is getting some visibility and up-votes recently, here is additional update on detecting css changes: </p> <p>Mutation Events have been now replaced by the more performance friendly Mutation Observer.</p> <blockquote> <p>The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification. </p> </blockquote> <p>Refer: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload