Question

I have the following markup:

<li id="fragment-3" class="slides virtualsation ui-tabs-panel" style="">
  <h1>Virtualisation</h1> 
  <p>By implementing virtualisation into Halton Borough Council Cetus Solutions managed to save them over £250,000 in annual expenditure.</p>
  <div class="animation">
    <div class="big-server" style="display: block;"><img src="_includes/images/sliders/big-server.png"></div>
    <div class="arrow" style="display: block;"><img src="_includes/images/sliders/arrow.png"></div>
    <div class="small-server-one" style="display: block;"><img src="_includes/images/sliders/small-server.png"></div>
    <div class="small-server-two" style="display: block;"><img src="_includes/images/sliders/small-server.png"></div>
    <div class="small-desktop" style="display: block;"><img src="_includes/images/sliders/small-desktop.png"></div>
  </div>
</li>

The child elements within the animation div all fade in:

$('.big-server').fadeIn(100);
$('.arrow').fadeIn(450);
$('.small-server-one').fadeIn(700);
$('.small-server-two').fadeIn(800);
$('.small-desktop').fadeIn(2000);

The parent LI (with id ‘fragment-3’ is part of a slideshow and when it is active the class ‘ui-tabs-hide’ is removed from it.

I need to write a function so that when the parent LI of the fading in divs isnt ui-tabs-hide then the function runs and the elements fade in, Does this make sense? Any help would be greatly appreciated!

Answer 1

You can use .closest(). Example:

if(!$("div.animation").closest(".ui-tabs-hide").length) {
    // parent is not .ul-tabs-hide    
}