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) - Fires asynchronously with each slider animation

slider.animatingTo //Int: Useful in .before(), the slide currently animating to

所以你可以这样做：

// Have a variable for the animation speed,
// so we can keep our "slide" and "fade" syncronized.
var myAnimationSpeed = 600;

$('.flexslider').flexslider({
  animation: "slide",
  slideshowSpeed: 7000,
  animationSpeed : myAnimationSpeed,
  before : function(slider){
    $('ul.slides li:eq(' + slider.animatingTo + ') div.data') // Select the next slide
    .hide() // Hide it...
    .fadeIn(myAnimationSpeed); // ...and fade !
  }

});

如何为flexslider内容提供淡入淡出效果

1 个答案: