javascript - 来自显示 :none to display:inline-block animation, 图像轮播

Question

我的网站需要一个新的移动版轮播。 所以我使用 html css 和 javascript 创建了一个，但是，图像之间的切换太“简单”了。 这是代码 HTML

<div class="containerr">
    <div style="display: inline-block;">
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
     <img src="https://placeimg.com/400/200/any"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/nature"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/architecture"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/animals"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/people"/>
    </div>
    <div>
      <img src="https://placeimg.com/400/200/tech"/>
    </div>
  </div>

CSS

}
.containerr {
  max-width: 100%;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.containerr div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.containerr img {
  width: 100%;
  height: auto;
}

JS

var currentIndex = 0,
  items = $('.containerr div'),
  itemAmt = items.length;

function cycleItems() {
  var item = $('.containerr div').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}

var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);

$('.next').click(function() {
  clearInterval(autoSlide);
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

$('.prev').click(function() {
  clearInterval(autoSlide);
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
});

https://codepen.io/anon/pen/PmbrWj

寻找任何提示来动画/转换 display:inline-block 到 display:none

Answer 1

您可以在 cycleItems() 函数中构建淡入/淡出效果:

function cycleItems() {
    var visibleItem = items.filter(":visible");
    var item = $('.containerr div').eq(currentIndex);
    visibleItem.fadeOut(function() {
        item.fadeIn();
    });
}

上面的代码使用了一个 jQuery 过滤器来查找当前可见的元素并仅对该元素调用 fadeOut()。然后，它使用回调函数在 fadeOut() 完成后对当前元素执行 fadeIn()。