Question

我对jquery的了解非常有限，但基本上当class=flex-active-slide添加到幻灯片中时，我希望将class=animate fadeInUp添加到class="caption-inner"

$(document).ready(function(){
   $('.flex-active-slide .caption-inner').addClass('animate fadeInUp');});

每次滑块更改时，

最终目标是激活动画css

Answer 1

我能够使用以下代码让我的工作

$('.flexslider').flexslider({
    animation: "fade",
    before: function(slider){
      $(slider).find(".flex-active-slide").find('.caption-inner').each(function(){
       $(this).removeClass("animated fadeInUp");
       });
     },
    after: function(slider){
          $(slider).find(".flex-active-slide").find('.caption-inner').addClass("animated fadeInUp");
      },

});

这应该让你去

Answer 2

包含animate.css并为flexslider的活动幻灯片添加以下样式：

.flex-active-slide .flex-caption{
    animation-name:slideInUp; 
    animation-duration:1s;
    animation-fill-mode:both
}

Answer 3

当您实例化滑块时，请使用after回调来应用您的类：

$('.slider').flexslider({
    after: function(slider) {
        slider.slides.eq(slider.currentItem).find('.caption-inner').addClass('animate fadeInUp');
    }
});

Answer 4

只需将其添加到您的CSS

即可

.flexslider .flex-active-slide .animation.animated-item-1 {
-webkit-animation: fadeInDown 1500ms linear 1500ms both;
-moz-animation: fadeInDown 1500ms linear 1500ms both;
-o-animation: fadeInDown 1500ms linear 1500ms both;
-ms-animation: fadeInDown 1500ms linear 1500ms both;
animation: fadeInDown 1500ms linear 1500ms both;
}

你当然可以做出更多变化。为Flexslider提供足够的时间来加载图像，因此需要1500ms。

在HTML中添加到元素（h1或p）

class="animation animated-item-1"

那就是它！享受，约翰

将动画css添加到flexslider标题

4 个答案: