Javascript 中心滑块项目上的淡入淡出div

我正在尝试在中心滑块项目上淡入/淡出一个div。 我使用的是

owl滑块

，中间的幻灯片/项目被滑块分配了类

。中心

每张幻灯片都有一个名为Age的div，我正试图使它在所有没有

.center

类的幻灯片上都隐藏这个Age div，并在中间幻灯片上淡入

中间的幻灯片由

owl-prev

/

owl-next

控件导航，因此这就是触发更改的原因

这是一种更有效的方法吗

例如：

我遇到的问题是如何在文档加载时测试.center类的存在性，以及如何在加载时初始设置Age div not visible

我尝试了

$（“.item age”）.hide（），它可以工作，但当我单击下一个控件时，所有年龄段的div都会出现，而不仅仅是与.center关联的

这就是我正在尝试的：`

    $(".owl-next").click(function(){
        if ($('.owl-item').hasClass('center')){
                $('.item-age').fadeIn();

            }
    });`

我想你是想做这样的事

$(".next").click(function(){
    if ($('.sliderItem').hasClass('center')){
        $('.age').fadeIn();
    }
});

我认为最好的方法是使用CSS

定义年龄分区的两种状态：

.age {
    opacity: 0; /* transparent = invisible */
}
.center .age {
    opacity: 1; /* opaque = visible */
}

这已经完成了隐藏/显示age div的技巧。要获得衰减效果，请添加css转换属性：

.age {
    opacity: 0; /* transparent = invisible */
    transition: opacity 1s; /* fade out transition */
}
.center .age {
    opacity: 1; /* opaque = visible */
    transition: opacity 500ms; /* fade in transition */
}

转换始终在转换的目标状态中定义。要更好地了解转换属性，请参阅。
您可以通过将选择器目标更改为
.owl item.center
直接对具有
.center
类的元素使用
.fadeIn（）
函数

尝试将代码更改为：

$(".owl-next").click(function () {
    $('.owl-item.center .item-age').fadeIn();
});

这里的人会花上“几个小时”，甚至可能不会回答，除非你发布一些代码。！：）谢谢，但我正在尝试淡入“项目年龄”分区，它是owl-item.center分区的子项，而不是整个owl-item.center分区本身，有什么想法吗？请查看更新，忘记添加下一个选择器。它应该会褪色。物品现在已经过时了。