jquery - bxslider 文字效果 animate.css

Question

我目前正在为我的网站设置 slider ，但遇到了一些问题。

我使用bxslider我想通过添加 animate.css 为每张幻灯片中的文本添加动画。 Animate.css 非常简单:只需将“animated”和动画名称作为类添加到动画元素即可。

基本上，我希望在 slider 完成到幻灯片的过渡后，文本会显示在带有动画的幻灯片上。我还希望文本在过渡到下一张带有下一个文本的幻灯片之前淡出。

由于 slider 具有回调函数，我认为通过添加必要的 CSS 类会很简单。

JQUERY

$(document).ready(function(){

    $(".bxslider").bxSlider({
        auto: true,
        startSlide: 0,
        slideWidth: 640,
        onSlideAfter: function(){
        $(".title").addClass("animated bounceInRight");
        $(".text").addClass("animated bounceInRight");
        },
        onSlideBefore: function(){
        $(".title").removeClass("animated bounceInRight");
        $(".text").removeClass("animated bounceInRight");
        }
  });
});

HTML

<ul class="bxslider">
  <li><img src="" />
<h1 class="title animated bounceInRight">TITLE 1</h1><p class="text animated bounceInRight">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 2</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 3</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 4</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
</ul>

CSS 1(我添加到 slider 的默认 CSS 中的内容)

.bxslider {
    padding: 0;
    margin: 0;
    list-style: none;
}
.title {
    position: absolute;
    top:100px;
    left: 100px;
    color: #FFF;
    font-family: Helvetica;
}
.text {
    display: block;
    position: absolute;
    top:200px;
    left: 200px;
    color: #000;
    font-family: Helvetica;
    width: 300px;
    background: #FFF;
    -webkit-animation-delay: 1s; /* to delay text "entrance" */

}

CSS 2(动画“触发”...不同的动画只是带有关键帧等的 CSS3 动画)

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

我在网上放了一个示例 slider :bxslider test .

到目前为止还存在几个问题。我将始终提到“文本”，但我的意思是 <h1>和 <p>标签。

第一张:第一张幻灯片动画正确，文本随动画一起显示。在第二张幻灯片上，文本已经可见，然后动画开始。我希望文本“通过”动画显示。

第二:我尝试添加 fadeOut 效果(再次通过添加和删除相应的 CSS 类)。这是行不通的，淡出将在过渡到下一张幻灯片后发生。我想我在添加和删除类时犯了一些根本性错误，但我无法弄清楚。

第三:我可以在每张幻灯片上使用不同的入口效果，甚至可以随机使用吗？

第四:Safari 中似乎存在错误。在我的计算机(Safari 和 Chrome)上，幻灯片放映从第一张幻灯片开始。在 Safari 的网络服务器上，最后一张幻灯片首先可见，然后它直接滚动到第一张幻灯片到第二张幻灯片......非常奇怪。在 Chrome 中，幻灯片看起来很正常。根据Safari的日志，代码没有问题

如果有人能帮助我解决这个问题，至少对于前两个问题，那就太好了。

谢谢!

Answer 1

如何做到这一点:

HTML:

<section class="slider">  
    <ul class="bxslider" >
        <li><img src="foto-1.jpg"/>
            <div class="one slider-text">your text</div>
        </li>
        <li><img src="foto-2.jpg"/>
        <div class="slider-text">your text 2</div>
        </li>       
        <li><img src="foto-3.jpg"/>
        <div class="slider-text">your text3 </div>
        </li>                    
    </ul>
</section>

CSS:

.slider .slider-text {
    font-size: 250%;
    color: #fff;
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 20%;
    width: 100%;  
}
.slider-text {
    visibility:hidden;
}
.slider-text.active-slide {
    visibility: visible;
}

JQUERY:

$('.bxslider').bxSlider({
    auto: true,
    preloadImages: 'all',
    mode: 'horizontal',
    captions: false,
    controls: false,
    pause: 5000,
    speed: 800,
    onSliderLoad: function () {
        $('.bxslider>li .slider-text').eq(1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");
    },
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-slide').removeClass('active-slide');
        $('.bxslider>li .slider-text').eq(currentSlideHtmlObject + 1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");

    },
    onSlideBefore: function () {
        $(".slider-text.active-slide").removeClass("wow animated bounceInRight");
        $(".one.slider-text.active-slide").removeAttr('style');

    }
});

我使用:
BxSlider v4.1.2
jQuery v1.11.2
最新 Animate.css

您可以用来:
哇.js