父样式= X时淡入元素

时间:2012-02-28 16:42:20

标签: jquery

我的主页上有一个滑块,标记为......

       <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(),但是我不确定Id如何以内联样式定位div ...

2 个答案:

答案 0 :(得分:1)

如果您向我们展示何时以及如何将显示更改为列表项,这将使您更容易。

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

或者您可以在定义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的过渡。无论如何,希望它有所帮助。

答案 1 :(得分:0)

如果我理解正确,这样的事情会起作用:

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(),它将返回一个布尔值。