Question

我正试图在中心滑块项目上淡入/淡出div。我正在使用owl-slider，滑块为中间幻灯片/项目分配了类.center。

每个幻灯片都有一个名为Age的div，我正试图这样做，所以这个Age div隐藏在没有.center类的所有幻灯片上，并且它在中心幻灯片上淡入。

中心幻灯片由owl-prev / owl-next控件导航，因此我正在考虑触发更改。

这是一种更有效的方法吗？

示例：

我遇到的问题是如何在文档加载时测试.center类的存在，以及如何初始设置Age div在加载时也不可见。

我已经尝试了$(".item-age").hide();并且它有效，但是当我点击下一个控件时，所有Age div都会出现，而不仅仅是与.center相关联的那个。

这就是我正在尝试的：`

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

            }
    });`

Answer 1

我认为你正在尝试做这样的事情

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

Answer 2

我认为最好的方法是将CSS与Transitions一起使用。

定义age div的两个状态：

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

这已经成功隐藏/显示年龄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 */
}

转换始终在转换的目标状态中定义。要更好地了解转换属性，请参阅this MDN article。

Answer 3

您可以通过将选择器目标更改为.fadeIn()来直接使用.center类的元素上的.owl-item.center函数。

尝试将代码更改为：

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

在中心滑块项上淡入淡出div

3 个答案: