javascript - jQuery Animate 不工作(位置已设置)

Question

这让我抓狂。将 slider 放在一起，图像将向下滑动，但是当我更改为动画时，它停止工作。

位置已设置为相对位置。有什么想法吗？

 function carousel() {
    var x = document.getElementsByClassName("pf-grid-items");
    var t = document.getElementsByClassName("rotateText");
    var image = document.getElementsByClassName("img1");
    for (var i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    for (var j = 0; j < t.length; j++) {
      t[j].style.display = "none";
    }
    for (var d = 0; d < image.length; d++) {
      image[d].style.display = "none";
    }

    slideIndex++;

    if (slideIndex > x.length) {slideIndex = 1}
    var output = x[slideIndex-1]
    var imageSlide = image[slideIndex-1]
    if (slideIndex % 2 !==0){

    $(output).slideDown(1000).promise().done(function(){

      textCarousel(t)
      $(imageSlide).animate({left:"250px"});
        $(output).fadeOut(5000);
    })
  } else {
    $(output).fadeIn(1000).promise().done(function(){

      textCarousel(t)
        $(output).fadeOut(5000);
    })
  }
  setTimeout(carousel, 7000);
}

CSS:

.img1 {
  position: relative;
  width: 50%;
  height: 100%;
  background: url('./flex/angular.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}

Answer 1

而不是使用 $.animate()并更改 left属性，您可以在 CSS 中通过分配一个适用 translateX() 的类来做到这一点(水平移动元素，不需要任何唯一的 position ing)并使用 transition使其动画化。 transition ing transform属性比使用 jquery 为 left 制作动画要高效得多。属性。

$('button').on('click',function() {
  $('div').addClass('move');
})

div {
  transition: transform 1s;
}
.move {
  transform: translateX(250px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>div</div>
<button>click</button>