【问题标题】:Fade in Slideshow with Slide Animation使用幻灯片动画淡入幻灯片
【发布时间】:2013-06-18 13:05:40
【问题描述】:

有人对 FlexSlider 有任何经验吗?还是一般的 jQuery?

我正在使用 FlexSlider 幻灯片脚本,并在此处根据需要对其进行了自定义:http://www.davidpottrell.co.uk/slide/demo/

我的问题是,有人知道如何让幻灯片淡入并为幻灯片使用幻灯片动画吗?目前我正在使用:

<script type="text/javascript">
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    start: function(slider){
      $('.flexslider').removeClass('loading');
    }
  });
});

这允许幻灯片淡入,但它也强制幻灯片淡入下一张。我想让它滑动。

小提琴链接:http://jsfiddle.net/HGEDz/1/

【问题讨论】:

标签: jquery html css animation flexslider


【解决方案1】:

我在你的小提琴上改变了两件小事

第一个 $(document).ready(function...(可能只是因为小提琴)和动画:“幻灯片”,

 $(document).ready(function(){
     $('.flexslider').flexslider({
         animation: "slide",
         start: function(slider){
             $('.flexslider').removeClass('loading');
         }
     });
 });

看这里http://jsfiddle.net/HGEDz/1/

【讨论】:

  • 啊,好吧-我会更新我的小提琴链接到这个。但是你现在看到我的问题了吗?幻灯片动画在幻灯片之间工作。但它也适用于页面加载时的整个幻灯片。我希望它淡入淡出。不过感谢您的小提琴修复:)
  • 所以当页面加载时会在画廊中淡入淡出然后滑动幻灯片?
  • 正确 :) 基本上我是在加载效果之后。我希望它快速淡出(几乎不引人注意),而不是滑入幻灯片,但足以使其轻松过渡。
  • 这当然是最接近我所追求的了!使用 display:none 只有一个问题。它下面的任何元素都暂时放置在幻灯片上方,直到它淡入。如此接近!
  • {visibility:hidden;} 会是好的做法吗?还是使用 position:absolute 更好的选择?无论哪种方式,这都很棒!我现在正在实施它并玩弄它。非常感谢 Caramba,你帮了大忙!
猜你喜欢
  • 2022-01-25
  • 2015-04-21
  • 2014-09-25
  • 2010-11-24
  • 2015-08-08
  • 1970-01-01
  • 1970-01-01
  • 2017-12-26
  • 1970-01-01
相关资源
最近更新 更多