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
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
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').bxSlider({ mode: 'fade'});
#1
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
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').bxSlider({ mode: 'fade'});