将动画 css 添加到 flexslider 标题

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

当您实例化滑块时，使用 after 回调来应用您的 class:

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

Answer 2

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

$('.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 3

只需将此添加到您的 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 足够的时间首先加载图像，因此 1500 毫秒。

在HTML你添加到元素(h1或p)

class="animation animated-item-1"

就是这样！享受吧，约翰

Answer 4

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

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

将动画 css 添加到 flexslider 标题

Adding animate css to a flexslider caption

javascript

css

jquery

animate.css