如何将Jquery函数应用于一个css类

How to apply Jquery function to just one css class

本文关键字：一个 css Jquery 函数 应用于      更新时间：2023-09-26

我使用的是一个图像滑块，我想将这个fadeIn函数添加到我的每个图像上的文本中，但它只适用于我的第一个图像，其余的都会变淡，所以当下一个幻灯片到来时，文本已经是可见的

ul class="bxslider">
        <li>
            <img src="img/sister-religions.png" alt="">
            <figcaption class="slide-info" >
                <h1>TITLE </h1>
                <p>prompta, mea id quem odio. Quo an officiis vivendum consequat, usu ad stet offendit repudiare. Sonet option euismod in sea. Ad vis brute posidonium, in qui enim utamur recusabo.</p>
            </figcaption>
        </li>
        <li>
            <img src="img/test1.png" alt="">
            <figcaption class="slide-info" >
                <h1>TITLE </h1>
                <p>prompta, mea id quem odio. Quo an officiis vivendum consequat, usu ad stet offendit repudiare. Sonet option euismod in sea. Ad vis brute posidonium, in qui enim utamur recusabo.</p>
            </figcaption>
        </li>
        <li>
            <img src="img/test2.png" alt="">
            <figcaption class="slide-info" >
                <h1>TITLE </h1>
                <p>prompta, mea id quem odio. Quo an officiis vivendum consequat, usu ad stet offendit repudiare. Sonet option euismod in sea. Ad vis brute posidonium, in qui enim utamur recusabo.</p>
            </figcaption>
        </li>
</ul>

这是jquery代码

(function($){
$(document).ready(function(){
    $('.bxslider').bxSlider({
         onSliderLoad: function(){
        $('.slide-info').fadeIn(3000);
      },
        onSlideAfter: function(){
        $('slide-info').fadeIn(3000);
      }
    });
 });

})（jQuery）；

我只需要它应用于当前的图像figcaption，而不是所有的，

onSlideAfter采用参数

函数参数是当前幻灯片元素（当转换完成时）。

所以试试

onSlideAfter: function(slide) {
    slide.find('.slide-info').fadeIn(3000);
}

我还将删除onSliderLoad处理程序。

BXSlider有一个模式选项，您可以将其传递给它，它将使其褪色，而无需进行任何额外的腿部工作。

 $('.bxslider').bxSlider({ mode: 'fade'});
相关文章：