Question

我尝试通过

构建图像交叉淡入淡出效果

将所选图像放在正面（位置：-9999到0）
将上一张图像放在背面（位置：0到-9999）
增加它的不透明度，直到达到1
将上一张图片的不透明度设置为0（这样我可以重复过程）

这是代码：

  <a-sky id="pano-1" src="image1" class="pano" opacity="0" position="-9999"></a-sky>
  <a-sky id="pano-2" src="image2" class="pano" opacity="0" position="-9999"></a-sky>

  var opacity = 0 // starting opacity
  var step = 0.1 // step size
  var target = 1 // target value
  var time = 50 // delay in milliseconds
  // start timer loop, and record it's index

  var increaseOpacity = setInterval(function () {
    // assuming your selector works, set opacity
    // increment opacity by step size
    opacity = (opacity * 10 + step * 10) / 10
    // if we reached our target value, stop the timer
    if (opacity > target) {
      clearInterval(increaseOpacity)
    }

  }, time)

  $(`#pano-${index}`).attr('position', 0)
  $('.pano').not(`#pano-${index}`).attr('position', -9999)
  $('.pano').not(`#pano-${index}`).attr('opacity', 0)

图像褪色但没有相互交叉（例如，它变为旧图像＆gt;白色＆gt;新图像）。

也许我的订单错了？如何归档这种效果？

Answer 1

在淡入淡出完成之前定位其他元素。像这样移动它们： -

  var opacity = 0 // starting opacity
  var step = 0.1 // step size
  var target = 1 // target value
  var time = 50 // delay in milliseconds
  // start timer loop, and record it's index

  var increaseOpacity = setInterval(function () {
    // assuming your selector works, set opacity
    // increment opacity by step size
    opacity = (opacity * 10 + step * 10) / 10
    // if we reached our target value, stop the timer
    if (opacity > target) {
      clearInterval(increaseOpacity)
      $('.pano').not(`#pano-${index}`).attr('position', -9999)
      $('.pano').not(`#pano-${index}`).attr('opacity', 0)
    }

  }, time)

  $(`#pano-${index}`).attr('position', 0)

我现在唯一能看到的另一个问题是z-index，但请先试试。

Answer 2

我认为像这样的任务应该尽可能简单，例如，总是在可以的地方使用css！ Javascript只应用于业务逻辑。

#slider {
  width: 300px;
  height: 100px;
  overflow: hidden;
  margin: 0 auto;
  opacity: 1;
  position: relative;
  
  transition: 400ms all linear;
}

#slider img {
  width: 100%;
  height: auto;
  
  transition: 400ms all linear;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#slider img.is-active {
  opacity: 1;
}

#slider.is-waiting {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="is-waiting">
  <img src="http://static1.squarespace.com/static/53c46660e4b07557fac2eb85/t/550ee40ce4b02547ba9c325e/1427039245866/doug-rickard_a-new-american-picture_west-gallery-6-b1.jpg?format=1500w" />
  <img src="http://artandyou.ru/upload/mce/image/kerek/vs/portrait/doug-rickard_a-new-american-picture_east-gallery-6-b.jpg" />
  <img src="http://www.yossimilo.com/artists/chris-mccaw/images/full-chris_mccaw-marking_time-west_gallery-13.jpg" />
</div>

{{1}}

实现交叉淡入淡出的图像效果

2 个答案: