时间戳

首页 > 解决方案 > 如何修复先显示然后淡入淡出的图像稍后慢慢启动

javascript - 如何修复先显示然后淡入淡出的图像稍后慢慢启动

问题描述

图像在淡出之前首先显示，因此会产生闪烁效果。我希望在调用fadeOut之后和调用fadeIn之前更改图像。有人可以帮忙吗？

JSFiddel：https://jsfiddle.net/t20ozdvn/1/

HTML：

<div class="output" id="output">
  <h1 class="cursor"></h1>
</div>
<div class="images">
  <img src="https://i.postimg.cc/4Y054xz3/video-1.jpg">
</div>

JS：

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
  a = 0,
  isBackspacing = false,
  isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
  "This is the line one text.",
  "Another line goes here that is awesome."
];

var images = {
  0: { 
  "urls": [
     "https://i.postimg.cc/4Y054xz3/video-1.jpg"
  ]},
  1: {
  "urls": [
     "https://i.postimg.cc/8jt43HcM/video-2.jpg"
  ]}
}

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
  speedWait = 1000, // Wait between typing and backspacing
  speedBetweenLines = 1000, //Wait between first and second lines
  speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function changeImage(number) {
  var imagesArr = [];
  images[number].urls.forEach(function(url){
    imagesArr.push('<img src="'+ url +'">');
  });
  $('.images').html(imagesArr)
  .fadeOut(400, function() {
    $(".images").attr('src',imagesArr);
  })
  .fadeIn(400);
}

function typeWriter(id, ar, callback) {
  var element = $("#" + id),
    aString = ar[a],
    eHeader = element.children("h1"), //Header element
    eParagraph = element.children("p")
    count = 0; //Subheader element

  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {

    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {

      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedBetweenLines);



        // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function() {
          typeWriter(id, ar);
        }, speedForward);
      }

      count++;

      // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {

      isBackspacing = true;
      setTimeout(function() {
        typeWriter(id, ar);
      }, speedWait);
    }

    // If backspacing is enabled
  } else {

    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {

      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function() {
        typeWriter(id, ar);
      }, speedBackspace);

      // If neither head or paragraph still has text, switch to next quote in array and start typing.
      } else {

        isBackspacing = false;
        i = 0;
        isParagraph = false;
        a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
        setTimeout(function() {
          typeWriter(id, ar);
        }, 50);

        changeImage(a);
      }
    }  
  }

标签： javascriptjquery

解决方案

这就是您想要的，不要重新附加您的整个图像 html，只需控制 url 的 src 属性，然后使用淡入淡出效果进行操作。

小提琴证明：https ://jsfiddle.net/uLzprfa7/

说明：图片淡出后，将新的url推送到src属性，最后淡入。

function changeImage(number) {
  var imagesArr = [];
  images[number].urls.forEach(function(url) {
    imagesArr.push(url);
  })
  $('#my-image').fadeOut(400, function() {
    $(".images").children().attr('src', imagesArr).fadeIn(400);
  })
}

推荐阅读