0

I have a slider on my homepage with my markup as so...

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

I want each child in my animation element to fade in when the parent li has the inline style of display:list-item;

Is this possible with jQuery?

I though about using .closest() but wwasnt sure how Id target a div with an inline style...

1
  • is this being driven by jQueryUI tabs widget? If so easy to bind to tabs events
    – charlietfl
    Feb 28, 2012 at 16:54

2 Answers 2

1

It would make it a lot easier if you showed us when and how you change the display to list-item.

You could look op the jquery function $.Deffered, and attach it to the method that changes the display of the li element. That way you can later on make a function that listens to rather the display has been set to list-item or not.

Or you could animate it within the method that defines the li display, like so:

Since it is a slider, I assume it changes when a arrow is pressed, and that the list item you've showen us, is one slider amongst others.

// when you click next
$('.arrow-next').on('click', function(){

    // hides the current, sets the next to list-item and caches the 'next' li
    var nextLi  = $('li.current').css('display','hidden').next('li').css('display','list-item')

    // fades in every element in the div.animation that is within the 'next' li element
    $('div.animation *', nextLi).fadeIn()


})

Hope this could help you. If the example above did not solve your problem, then i'm not quite sure how you handle the transition from not being list-item, into being list-item. Anyways, hope it helped.

0

If I understood correctly, something like this would work:

var hasInlineListItem = $('#whatever').closest('li').is(function () {
    return this.style.display == 'list-item';
});

if (hasInlineListItem) {
    //do whatever you want
}

jsFiddle Demo to illustrate how it works

jQuery has several filter methods that you can use. I used is() here, which will return a boolean.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.