How to apply Jquery function to just one css class

Question

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

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

(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 ,

Phil · Accepted Answer · 2015-11-09 00:09:58Z

1

onSlideAfter takes an argument

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.

answered Nov 9, 2015 at 0:09

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CYBERSIX Over a year ago

onSlideAfter works but I dont get the effect on my first slide when the whole page and slider load

Tim Sheehan · Accepted Answer · 2015-11-09 00:13:34Z

1

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

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

answered Nov 9, 2015 at 0:13

Tim Sheehan

4,0141 gold badge17 silver badges18 bronze badges

8 Comments

CYBERSIX Over a year ago

I am trying to fadein a container with bunch of text in for each image not fade the images

Tim Sheehan Over a year ago

Change your list items to divs - stackoverflow.com/questions/20488330/…

Tim Sheehan Over a year ago

@CYBERSIX or are you saying you don't actually want the images to fade at all?

CYBERSIX Over a year ago

images slide or fade ,i dont care , when the imageslider is loaded , i want to fadein some text , it work with the code Phil gave me but not on the first image , when I go to next image I have the fadein effect but not when the image slider first loaded

Tim Sheehan Over a year ago

Check out the link I pasted above, BXSlider can fade your html and images in and out but you'll need to change your lists to divs.

|

Collectives™ on Stack Overflow

How to apply Jquery function to just one css class

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related