Question

我有一个javascript / jquery幻灯片，但我想删除fadein和fadeout图像之间有点长的空白虚无。我尝试使用小版delay，因为默认情况下它仍然有一个空白的暂停，但这不起作用，任何想法？

jsfiddle：https://jsfiddle.net/jzhang172/s624zn7d/1/

＆＃13;

var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
                   "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
                   "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];

function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];

  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};


function roll(imagesArray, currentPos){

  var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
  slide.fadeIn(2000, function() {
    slide.fadeOut(1500, function() {
      currentPos++;
      if(currentPos >= imagesArray.length){
        currentPos = 0;
      }
      roll(imagesArray, currentPos);
    });
  });
}

$(function () {
  preloadImg(imagesArray, function (imagesArray) {
    roll(imagesArray, 0, 3);
  });
});

＆＃13;

.featured-wrapper {
  height: 500px;
  width: 100%;
  overflow: hidden;
}

.things {
  font-size: 50px;
  height: 500px;
  width: 100%;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="featured-wrapper" data-parallax="scroll" data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">

</div>
<div class="things">I'm the stuff underneath</div>

＆＃13;

Answer 1

您应该使用不透明度动画，其中包含适合您需要的缓动效果。您可以使用jquery ui easings

jQuery延迟淡入淡出

1 个答案: