Question

使用flexslider，我需要为幻灯片中的每个内容添加不同风格的动画。我的HTML代码是这样的

<li>
  <div style="background-image: url('/img/backgrounds/01.jpg'); height: 889px;" class="slide fullscreen" data-url="./img/backgrounds/01.jpg">
   <div style="height: 889px;" class="overlay fullscreen">
    <div style="margin-top: 332px;" class="container vertical-center">
             <h1 class="title">Land of Creativity</h1>
             <button class="welcome">Take a look</button>
    </div> 
     </div>
  </div>
</li>

我的js就像这样

$(".home").flexslider({
        animation:"fade",
        animationLoop:true,
        animationSpeed:3000,
        easing:"easeOutBack",
        slideshow:true,
        pauseOnHover:false,
        controlNav:false,
        directionNav:false,


    });

我需要幻灯片中每个元素的不同类型的效果。谢谢你的帮助。我找到答案.. 像这样改变了js

$(".home").flexslider({
        animation:"fade",
        animationLoop:true,
        animationSpeed:3000,
        easing:"easeOutBack",
        slideshow:true,
        pauseOnHover:false,
        controlNav:false,
        directionNav:false,
        start: function(slider){        
            $('#title1').delay(100).show().animate({opacity: 1, bottom:"0px"},'slow');
            $('#button1').delay(100).show().animate({opacity: 1, top:"0px"},'slow');

        },
        after: function(slider){
            if(slider.currentSlide == 1){
                $('#title2').delay(100).show().animate({opacity: 1, top:"-150px"},'slow');
                $('#button2').delay(100).show().animate({opacity: 1, bottom:"-90px"},'slow');
            }
            else if(slider.currentSlide == 2){
                $('#title3').delay(100).show().animate({opacity: 1, bottom:"0px", left:"0px"},'slow');
                $('#button3').delay(100).show().animate({opacity: 1, top:"0px"},'slow');
            }
            else if(slider.currentSlide == 3){
                $('#title4').delay(100).show().animate({opacity: 1, bottom:"0px", right:"0px"},'slow');
                $('#button4').delay(100).show().animate({opacity: 1, top:"0px"},'slow');
            }
            else{

            }
        }
    });

flexslider中内容的不同动画？

0 个答案: