当parent style =X时淡入元素

Question

我在我的主页上有一个滑块，我的标记是这样的…

       <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>

我希望当父元素li具有内联样式display:list-item时，动画元素中的每个子元素都会淡入。

使用jQuery可以做到这一点吗？

我考虑过使用.closest()，但我不确定如何使用内联样式的div……

Answer 1

如果您向我们展示何时以及如何将显示更改为list-item，将会容易得多。

您可以查看jquery函数$.Deffered，并将其附加到更改li元素显示的方法中。这样，您以后就可以创建一个侦听的函数，而不是将显示设置为list-item或not。

或者，您可以在定义li显示的方法中对其进行动画处理，如下所示：

由于它是一个滑块，我假设它会在按下箭头时发生变化，并且您向我们展示的列表项是其中一个滑块。

// 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()


})

希望这能对你有所帮助。如果上面的例子不能解决您的问题，那么我不太确定您如何处理从不是list-item到list-item的转换。不管怎样，希望它能帮上忙。

Answer 2

如果我没理解错的话，像这样的东西是可以工作的：

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有几个您可以使用的filter methods。我在这里使用了is()，它将返回一个布尔值。