动画在开始前跳到0

Question

我正在使用 jQuery 动画制作 coverflow 图像滑块。动画第一次为运行时，它跳转到 0 而不是从 -500 开始。

此外，当我一直向右移动并且它循环返回时，动画并没有像它应该的那样从头开始。它在开始之前先从结束回到开始。

我已经尝试找到如何使动画以特定值开始但运气不佳。

它应该做的是从给定值开始动画，而不是首先跳转到 0。它还应该从当前值循环回到开头，而不是从结尾回到开头的动画。

$(document).ready(function() {
  $('.slides_container div:first').addClass('previous_slide');
  $('.slides_container div:nth-child(2)').addClass('current_slide');
  $('.slides_container div:nth-child(3)').addClass('next_slide');
});

var options = {
  autoplay: 0000, //delay between transitions in milliseconds; 0 or lower is no autoplay
  sliderTransitionSpeed: 1200, //speed of the animation when changing slides
  transitionAnimation: '',
};

jQuery(document).ready(function() {
  if (options.autoplay > 0) {
    setInterval(function() {
      moveRight();
    }, options.autoplay);
  }
  
  if (options.transitionAnimation == 'slider') {
    jQuery('#slider').addClass('slider');
  } else if (options.transitionAnimation == 'coverflow') {
    jQuery('#slider').addClass('coverflow');
  } else {
    jQuery('#slider').addClass('slider');
  }

  var slideCount = $('#slider .slides_container div').length;
  var slideWidth = $('#slider .slides_container div').width();
  var slideHeight = $('#slider .slides_container div').height();
  var sliderContainerWidth = slideCount * slideWidth;

  $('#slider .slides_container').css({
    transform: "translate3d(" + -slideWidth + "px, 0px, 0px)"
  });

  $('#slider .slides_container div').css("line-height", slideHeight + "px");

  $('#slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider .slides_container').css({
    width: sliderContainerWidth
  });
  
  $('#slider .slides_container').css({
    "transform": "translate3d( px, 0px, 0px)"
  });
  
  // , marginLeft: - slideWidth
  // $('#slider .slides_container div:last-child').prependTo('#slider .slides_container');

  var sliderLocation = -slideWidth;
  var maxLocationRight = slideCount * -slideWidth + slideWidth;
  console.log(maxLocationRight);
  console.log(sliderLocation);

  function moveLeft() {
    sliderLocation += slideWidth;
    if (sliderLocation == 0) {
      console.log("begin");
    }
    $('#slider .slides_container').animate({
      sliderLocation
    }, {
      step: function(now, fx) {
        $(this).css({
          "transform": "translate3d(" + now + "px, 0px, 0px)"
        });
      },
      duration: options.sliderTransitionSpeed,
      complete: function() {
        console.log('Animation is done');
        console.log(sliderLocation);
      }
    });
  };

  function moveRight() {
    if (sliderLocation == maxLocationRight) {
      $('#slider .slides_container').css({
        transform: "translate3d(0px, 0px, 0px)"
      });
      sliderLocation = 0;

      console.log(sliderLocation);
      console.log("end");
    } else {
      console.log("moveRight");
      sliderLocation -= slideWidth;

      $('#slider .slides_container').animate({
        sliderLocation
      }, {
        step: function(now, fx) {
          $(this).css({
            "transform": "translate3d(" + now + "px, 0px, 0px)"
          });
        },
        duration: options.sliderTransitionSpeed,
        complete: function() {
          console.log('Animation is done');

          console.log(sliderLocation);
        }
      });
    }
  };

  $('a.control_prev').click(function() {
    moveLeft();
    move_classes('backwards');
  });

  $('a.control_next').click(function() {
    moveRight();
    move_classes('forward');
  });
});

function move_classes(moveDirection) {
  var previous_slide = jQuery('.previous_slide');
  var current_slide = jQuery('.current_slide');
  var next_slide = jQuery('.next_slide');
  var slides = [previous_slide, current_slide, next_slide];
  var slidesClasses = ['previous_slide', 'current_slide', 'next_slide'];

  i = 0;
  slides.forEach(function(arrayValue) {
    if (moveDirection == 'forward') {
      var slideToMove = arrayValue.next();
      if (!slideToMove.length) {
        slideToMove = arrayValue.parent().find('div:first');
      }
    } else if (moveDirection == 'backwards') {
      var slideToMove = arrayValue.prev();
      if (!slideToMove.length) {
        slideToMove = arrayValue.parent().find('div:last-child');
      }
    }
    // console.log(slideToMove);
    // console.log(arrayValue);

    slideToMove.addClass(slidesClasses[i]);
    arrayValue.removeClass(slidesClasses[i]);
    i++;
  });
}

#slider {
  position: relative;
  /* overflow: hidden; */
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider .slides_container {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
  perspective: 1200px;
}

#slider .slides_container div {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* width: 750px;
        height: 450px; */
  background: #ccc;
  text-align: center;
  background-size: cover;
}

a.control_prev,
a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 0px 7px;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover,
a.control_next:hover {
  opacity: 1;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 10px 10px 0;
}

a.control_next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}


/* Coverflow css */

.previous_slide {
  transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(50deg);
  z-index: 0;
  transition-duration: 1000ms;
}

.current_slide {
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);
  z-index: 1;
  transition-duration: 1000ms;
}

.next_slide {
  transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(-50deg);
  z-index: 0;
  transition-duration: 1000ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <a href="#" class="control_next">
    <p>></p>
  </a>
  <a href="#" class="control_prev">
    <p><</p>
  </a>
  <div class="slides_container">
    <div style="background-color: red">Last Slide Duplicate</div>
    <div style="background-color: green">1</div>
    <div style="background-color: blue">2</div>
    <div style="background-color: orange">3</div>
    <div style="background-color: grey">4</div>
    <div style="background-color: yellow">First Slide Duplicate</div>
  </div>
</div>

我的fiddle：http://jsfiddle.net/JostiFrank/ecr2bzsL/1/

Answer 1

您忘记设置动画的初始值属性。由于您没有为简单的 css 数值设置动画，因此在动画的 step 函数中没有参考 now 的开始。要设置该值，只需使用

在对象上设置该值

$('#slider .slides_container')[0].sliderLocation = -slideWidth;

然后为新属性

制作动画

$('#slider .slides_container').animate({
    sliderLocation: sliderLocation
} ...

工作示例：

$(document).ready(function() {
  $('.slides_container div:first').addClass('previous_slide');
  $('.slides_container div:nth-child(2)').addClass('current_slide');
  $('.slides_container div:nth-child(3)').addClass('next_slide');
});

var options = {
  autoplay: 0000, //delay between transitions in milliseconds; 0 or lower is no autoplay
  sliderTransitionSpeed: 1200, //speed of the animation when changing slides
  transitionAnimation: '',
};

jQuery(document).ready(function() {
  if (options.autoplay > 0) {
    setInterval(function() {
      moveRight();
    }, options.autoplay);
  }
  
  if (options.transitionAnimation == 'slider') {
    jQuery('#slider').addClass('slider');
  } else if (options.transitionAnimation == 'coverflow') {
    jQuery('#slider').addClass('coverflow');
  } else {
    jQuery('#slider').addClass('slider');
  }

  var slideCount = $('#slider .slides_container div').length;
  var slideWidth = $('#slider .slides_container div').width();
  var slideHeight = $('#slider .slides_container div').height();
  var sliderContainerWidth = slideCount * slideWidth;
  $('#slider .slides_container')[0].sliderLocation = -slideWidth;
  $('#slider .slides_container').css({
    transform: "translate3d(" + -slideWidth + "px, 0px, 0px)"
  });

  $('#slider .slides_container div').css("line-height", slideHeight + "px");

  $('#slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider .slides_container').css({
    width: sliderContainerWidth
  });
  
  $('#slider .slides_container').css({
    "transform": "translate3d( px, 0px, 0px)"
  });
  
  // , marginLeft: - slideWidth
  // $('#slider .slides_container div:last-child').prependTo('#slider .slides_container');

  var sliderLocation = -slideWidth;
  var maxLocationRight = slideCount * -slideWidth + slideWidth;
  console.log(maxLocationRight);
  console.log(sliderLocation);

  function moveLeft() {
    sliderLocation += slideWidth;
    if (sliderLocation == 0) {
      console.log("begin");
    }
    $('#slider .slides_container').animate({
      sliderLocation: sliderLocation
    }, {
      step: function(now, fx) {
        $(this).css({
          "transform": "translate3d(" + now + "px, 0px, 0px)"
        });
      },
      duration: options.sliderTransitionSpeed,
      complete: function() {
        console.log('Animation is done');
        console.log(sliderLocation);
      }
    });
  };

  function moveRight() {
    if (sliderLocation == maxLocationRight) {
      $('#slider .slides_container').css({
        transform: "translate3d(0px, 0px, 0px)"
      });
      sliderLocation = 0;

      console.log(sliderLocation);
      console.log("end");
    } else {
      console.log("moveRight");
      sliderLocation -= slideWidth;

      $('#slider .slides_container').animate({
        sliderLocation: sliderLocation
      }, {
        step: function(now, fx) {
          $(this).css({
            "transform": "translate3d(" + now + "px, 0px, 0px)"
          });
        },
        duration: options.sliderTransitionSpeed,
        complete: function() {
          console.log('Animation is done');

          console.log(sliderLocation);
        }
      });
    }
  };

  $('a.control_prev').click(function() {
    moveLeft();
    move_classes('backwards');
  });

  $('a.control_next').click(function() {
    moveRight();
    move_classes('forward');
  });
});

function move_classes(moveDirection) {
  var previous_slide = jQuery('.previous_slide');
  var current_slide = jQuery('.current_slide');
  var next_slide = jQuery('.next_slide');
  var slides = [previous_slide, current_slide, next_slide];
  var slidesClasses = ['previous_slide', 'current_slide', 'next_slide'];

  i = 0;
  slides.forEach(function(arrayValue) {
    if (moveDirection == 'forward') {
      var slideToMove = arrayValue.next();
      if (!slideToMove.length) {
        slideToMove = arrayValue.parent().find('div:first');
      }
    } else if (moveDirection == 'backwards') {
      var slideToMove = arrayValue.prev();
      if (!slideToMove.length) {
        slideToMove = arrayValue.parent().find('div:last-child');
      }
    }
    // console.log(slideToMove);
    // console.log(arrayValue);

    slideToMove.addClass(slidesClasses[i]);
    arrayValue.removeClass(slidesClasses[i]);
    i++;
  });
}

#slider {
  position: relative;
  /* overflow: hidden; */
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider .slides_container {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
  perspective: 1200px;
}

#slider .slides_container div {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* width: 750px;
        height: 450px; */
  background: #ccc;
  text-align: center;
  background-size: cover;
}

a.control_prev,
a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 0px 7px;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover,
a.control_next:hover {
  opacity: 1;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 10px 10px 0;
}

a.control_next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}


/* Coverflow css */

.previous_slide {
  transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(50deg);
  z-index: 0;
  transition-duration: 1000ms;
}

.current_slide {
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);
  z-index: 1;
  transition-duration: 1000ms;
}

.next_slide {
  transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(-50deg);
  z-index: 0;
  transition-duration: 1000ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <a href="#" class="control_next">
    <p>></p>
  </a>
  <a href="#" class="control_prev">
    <p><</p>
  </a>
  <div class="slides_container">
    <div style="background-color: red">Last Slide Duplicate</div>
    <div style="background-color: green">1</div>
    <div style="background-color: blue">2</div>
    <div style="background-color: orange">3</div>
    <div style="background-color: grey">4</div>
    <div style="background-color: yellow">First Slide Duplicate</div>
  </div>
</div>

动画在开始前跳到0

Animation jumps to 0 before starting

javascript

css

jquery

css-transforms

jquery-animate