how to implement slideshow transition effects?

问题

I think in transition effects in slideshows,just two animation methods of fade in and fade out are ready to use,others have to be implemented by css,am I right?if not,please give examples,if yes,guide me how can I implement some of them,or have anyone done it before?

回答1:

The fadeIn() and fadeOut() are the easiest to use but they are just shortcuts to jquery's animate function. These use css, just like all the other animations including custom one's, you just don't have to deal with it directly.

In jQuery you can use the animation function to transition any css value that has a numeric value (height,width,top,left,etc.) For more complex built-in methods you can try the jQuery UI library.

An example:

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

See the jQuery animate documentation for more details.

I have also built my own jQuery slider which you can find here. Going into the source code may give you more information as it deals heavily with animating the position and size of images.

Hope this helps.

回答2:

I had done it two weeks ago. I use css3 transition for fadeIn/fadeOut animation.

demo: http://www-stage.moztw.org/index2.shtml

Stylus (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);
  });
});

来源：https://stackoverflow.com/questions/17504007/how-to-implement-slideshow-transition-effects