我的主页上有一个滑块,标记为......
<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 ...
答案 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()
,它将返回一个布尔值。