javascript - 如何让数字淡入而不是弹出-6ren

javascript - 如何让数字淡入而不是弹出

转载作者：行者123 更新时间：2023-11-28 06:13:44

好吧，这有点难以解释，但我试图让数字在“产生”或生成时消失，而不是突然出现。 Here是我正在尝试使用的 fiddle 。我正在使用 input 标记作为数字，并使用 for 语句来生成其余的 --

for (I = 0; I < $("#input:text").val(); I++) {
        N.innerHTML += 1 + I + " "
    }

我希望我解释得足够好，以便人们理解!

最佳答案

Append span elements instead of text so that you can easily select elements using selector.

使用 setTimeout 使其通过 index 连续发生。

试试这个:

var D = document,
  In = D.getElementById("input"),
  CC = D.getElementById("submit"),
  N = D.getElementById("N"),
  I;

$(In).keyup(function(Key) {
  if (Key.keyCode == 13) {
    for (var i = 0; i < $("#input:text").val().length; i++) {
      var span = '<span style=\'display:none\'>' + (i + 1) + ' ' + $("#input:text").val()[i] + ' </span>'; //set display of `span` element as `none`
      N.innerHTML += span;
    }
  }
  $('#N span').each(function(i) {
    setTimeout(function() {
      $(this).hide().fadeIn(500);
    }.bind(this), (i * 500)); // `.bind()` will pass the outer `this` context in`setTimeout` when handler is invoked
  })
});

$(CC).click(function() {
  N.innerHTML = "";
});

body {
  cursor: default;
  outline-width: 0px;
}
#main {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <div id="main">
    <input type="text" id="input" maxlength="3" placeholder="Press submit to clear all" />
    <input type="submit" id="submit" />
  </div>
  <h1 id="N"></h1>
</body>

Fiddle here

关于javascript - 如何让数字淡入而不是弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36002672/