Quick jQuery Tip: Triggering Effects Based on Visibility

First time here? Subscribe to my RSS feed or follow me on Twitter.
Thanks for visiting!

I often need to trigger an effect like “hide” or “show” on an element but only if it’s not already hidden or visible. Why is this important? Well, if you have elements that can be switched from visible to hidden independently, and then you try to hide an element that’s already hidden, the element will first be revealed and then hidden again causing random flashing or haphazard animations. This is especially noticeable with fade or blind effects since they take time to animate.

The solution is very easy with jQuery filters. Before using an effect, be sure you’re only operating on the elements that are either hidden or visible by using the :hidden and :visible filters:

$('.hidden_elements:hidden').show(); 
$('.visible_elements:visible').hide();

You can read up on the hidden and visible filters in the Selectors section of the jQuery Docs.



Find This Article Useful?

  • Share/Save This Entry



Related Articles

About this entry

You’re currently reading “Quick jQuery Tip: Triggering Effects Based on Visibility,” an entry on MirthLab

Published:
Thursday, July 9th, 2009 at 12:55 pm
Author:
Mark Quezada
Category:
Web Development
Tags:
, ,