如何为 flexslider 内容赋予淡入淡出效果

Question

我正在使用 flex 滑块中的内容滑块。从下面提到的 html 代码和 javascript 中，滑块和内容对我来说很好，具有滑块幻灯片动画效果。

但是滑动的时候内容突然来了。我想要在滑动时为该内容添加淡入淡出效果，这样我的滑块看起来就很漂亮了。

我的html代码是，

  <section class="slider">
    <div class="flexslider">
      <ul class="slides">
        <li>
        <div class="image"><a href="#"><img src="images/1.jpg"/></a></div>
                <div class="data">
                    <h4>First Heading</h4>
                    <p>First Para</p>
                    <span>Read More</span>
                </div>
        </li>

         <li>
        <div class="image"><a href="#"><img src="images/2.jpg"/></a></div>
                <div class="data">
                    <h4>Second Heading</h4>
                    <p>Second Para</p>
                    <span>Read More</span>
                </div>
        </li>


      </ul>
    </div>
  </section>

我的 javascript 是，

(function($){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 7000,


  });
})(jQuery);

Answer 1

来自Flexslider docs：

before: function(){}, //Callback: function(slider) - 与每个滑块动画异步触发 slider.animatingTo //Int：在.before()中有用，当前动画到的幻灯片

所以你可以这样做：

// 有一个动画速度的变量， // 这样我们就可以保持“幻灯片”和“淡出”同步。 var myAnimationSpeed = 600; $('.flexslider').flexslider({ 动画：“幻灯片”， 幻灯片速度：7000， 动画速度：我的动画速度， 之前：函数（滑块）{ $('ul.slides li:eq(' + slider.animatingTo + ') div.data') // 选择下一张幻灯片 .hide() // 隐藏它... .fadeIn(myAnimationSpeed); // ...并褪色！ } });