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

I am using an image slider and I want to add this fadeIn function to the text on each of my images , but it only works on my first image and the rest gets fadeIn so when the next slide comes the text is already visible

我正在使用一个图像滑块,我想将这个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>

here is the jquery code

这是jquery代码

(function($){

$(document).ready(function(){

    $('.bxslider').bxSlider({
         onSliderLoad: function(){

        $('.slide-info').fadeIn(3000);

      },
        onSlideAfter: function(){

        $('slide-info').fadeIn(3000);
      }
    });

 });

})(jQuery);

I only need it to apply to the current image figcaption not all of them ,

我只需要它来应用于当前的图像figcaption不是全部,

2 个解决方案

#1

onSlideAfter takes an argument

onSlideAfter接受了争论

Function argument is the current slide element (when transition completes).

函数参数是当前的幻灯片元素(转换完成时)。

So try

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

I'd also remove the onSliderLoad handler.

我还会删除onSliderLoad处理程序。

#2

BXSlider has a mode option you can pass to it that will make it fade without having to do any extra legwork.

BXSlider有一个模式选项,你可以传递给它,使其褪色,而不必做任何额外的腿部工作。

 $('.bxslider').bxSlider({ mode: 'fade'});

#1