Detect if an element is visible with jQuery

Question

Using  fadeIn   and  fadeOut    I have been hiding showing an element on my page  but with two buttons  one for hide and one for show  I now want to have one button to toggle both   My HTML   JavaScript as it is    lt a onclick  showTestElement    gt Show lt  a gt   lt a onclick  hideTestElement    gt Hide lt  a gt    function showTestElement           testElement   fadeIn  fast       function hideTestElement           testElement   fadeOut  fast        My HTML   JavaScript as I would like to have it    lt a onclick  toggleTestElement    gt Show Hide lt  a gt    function toggleTestElement       if  document getElementById  testElement      IS VISIBLE               testElement   fadeOut  fast        else           testElement   fadeIn  fast            How do I detect if the element is visible or not

User · Answer

if     testElement   is   visible           what you want to do when is visible

User · Answer

You re looking for   is   visible    Although you should probably change your selector to use jQuery considering you re using it in other places anyway  if     testElement   is   visible             Code    It is important to note that if any one of a target element s parent elements are hidden  then  is   visible   on the child will return false  which makes sense   jQuery 3  visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements  There s good news for jQuery 3  however  as this post explains  Ctrl   F for  visible    Thanks to some detective work by Paul Irish at Google  we identified some cases where we could skip a bunch of extra work when custom selectors like  visible are used many times in the same document  That particular case is up to 17 times faster now  Keep in mind that even with this improvement  selectors like  visible and  hidden can be expensive because they depend on the browser to determine whether elements are actually displaying on the page  That may require  in the worst case  a complete recalculation of CSS styles and page layout  While we don   t discourage their use in most cases  we recommend testing your pages to determine if these selectors are causing performance issues    Expanding even further to your specific use case  there is a built in jQuery function called   fadeToggle    function toggleTestElement             testElement   fadeToggle  fast

User · Answer

There s no need  just use fadeToggle   on the element       testElement   fadeToggle  fast      Here s a demo

[javascript] Detect if an element is visible with jQuery

Examples related to javascript

Examples related to jquery