如何实现幻灯片过渡效果？

Question

我认为在幻灯片的过渡效果中，只有淡入和淡出两种动画方法可以使用，其他的必须通过css实现，对吗？如果不是，请举例，如果是，指导我我怎样才能实现其中的一些，或者以前有人做过吗？

Answer 1

fadeIn() 和fadeOut() 是最容易使用的，但它们只是 jquery 的动画功能的快捷方式。这些使用 css，就像所有其他动画（包括自定义动画）一样，您不必直接处理它。

在 jQuery 中，您可以使用动画函数来转换任何具有数值（高度、宽度、顶部、左侧等）的 css 值。对于更复杂的内置方法，您可以尝试 jQuery UI 库。

一个例子：

$('#myDiv').animate({height:30,width:300,top:400,left:300});

有关详细信息，请参阅jQuery animate documentation。

我还建立了自己的jQuery slider which you can find here。进入源代码可能会为您提供更多信息，因为它大量处理动画图像的位置和大小。

希望这会有所帮助。

Answer 2

两周前我已经完成了。我将 css3 过渡用于淡入/淡出动画。

演示：http://www-stage.moztw.org/index2.shtml

手写笔 (stylus)

.slider
  position: relative

.slider-section
  position: absolute
  left: 0
  top: 0
  height: 100%
  width: 100%
  opacity: 0
  z-index: 0
  transition: opacity 2s ease

  &.show
    opacity: 1
    z-index: 1

.slider-section-title
  color: #FFF
  position: absolute
  left: 10px
  top: 10px

.slider-section-description
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  padding: 5px 10px
  background: rgba(0, 0, 0, .7)
  color: #FFF

.slider-btn-group
  position: absolute
  z-index: 2
  width: 100%
  height: 10px
  bottom: 45px
  left: 0
  text-align: center

.slider-btn
  display: inline-block
  margin: 0 5px

  a
    display: inline-block
    width: 25px
    height: 10px
    background: rgba(0, 0, 0, .5)
    color: #FFF
    text-indent: 100%
    overflow: hidden

  &.current a
    background: rgba(0, 0, 0, .8)

HTML

<div class="slider key-point-slider">
    <section class="slider-section show" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-beta.jpg">
        <h3 class="slider-section-title">Title 1</h3>
        <div class="slider-section-description">
            <p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
        </div>
    </section>
    <section class="slider-section" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-affiliates.jpg">
        <h3 class="slider-section-title">Title 2</h3>
        <div class="slider-section-description">
            <p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
        </div>
    </section>
</div>

JavaScript

// load images
$('.slider-section').each(function () {
  var $this = $(this);
  $this.css('background-image', 'url("' + $this.data('background') + '")');
});

// init all sliders
$('.slider').each(function () {
  var $this = $(this);
  var $sections = $this.find('.slider-section');
  var len = $sections.length;
  var timer;
  var curr = 0;
  var btnGroup = $('<div class="slider-btn-group"></div>');

  // append crontral btns
  (function () {
    var i = len;
    var tmp = '<ul class="slider-btn-group-ul">';
    while (i) {
      i -= 1;
      tmp += '<li class="slider-btn"><a href="#">' + i + '</a></li>';
    }
    tmp += '</ul>';
    btnGroup.append(tmp);
  })();

  var $btns = btnGroup.find('.slider-btn a').on('click', function () {
    moveTo($(this).parent().index());
    return false;
  });

  $this.append(btnGroup);

  function moveTo(i) {
    curr = i;
    $sections
      .eq(i)
      .addClass('show')
      .siblings('.show')
      .removeClass('show');
    $btns
      .parent()
      .eq(i)
      .addClass('current')
      .siblings('.current')
      .removeClass('current');
  }

  moveTo(0);

  var next = (function next(i) {
    timer = setTimeout(function () {
      moveTo(i);
      next(i + 1 >= len ? 0 : i + 1);
    }, 5000);
    return next;
  })(1);

  $this.on('mouseenter', function () {
    timer && clearTimeout(timer);
  });

  $this.on('mouseleave', function () {
    next(curr);
  });
});