Question

这让我疯了。将滑块放在一起，图像将会滑动，但当我更改为动画时，它将停止工作。

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

 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属性，而是可以通过指定一个应用translateX()的类来在CSS中执行此操作（以横向移动元素，不会需要任何唯一的position ing并使用transition为其设置动画。 transition transform属性比使用jquery为left属性设置动画要高得多。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery Animate不工作（已设置位置）

CSS：

1 个答案: