Question

您能否请一看这段代码，让我知道如何从文字的左侧到右侧添加淡入，以便文字显示为首先S，然后是t，然后r，...最后是最后一个字母g？

$(".btn").on("click", function() {
  $(".str").addClass('present');
});

.str {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
.present {
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

Answer 1

你可以使用下面代码片段中的一小部分JS（使用jQuery）将元素的内容分成单独的字符，将它们全部包装成单独的跨度，并逐个将它们添加到每个字符中。这会逐渐产生每个角色逐渐消失的效果。

这个答案与Farzad的答案非常相似，因为它使用了多个span字符，但两者之间存在显着差异。虽然另一个答案是手动添加延迟，因此很难适应不同长度的文本，但此答案中的代码段使用transitionend事件，一旦转换，该事件就会将类添加到下一个兄弟span当前span已完成。因此，它也可以自动适应不同的文本长度。

＆＃13;

$(document).ready(function() {
  $this = $('.str');
  var characters = $this.text().split("");
  $this.empty();
  $.each(characters, function(i, el) {
    $this.append("<span>" + el + "</span");
  });

  $(".btn").on("click", function() {
    $(".str span:nth-child(1)").addClass('present');
  });
  $('.str span').on('transitionend', function() {
    if ($(this).next('span').length != 0)
      $(this).next('span').eq(0).addClass('present');
  });
});

＆＃13;

.str span {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  transition: all 0.35s;
}
.str .present {
  opacity: 0.9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

＆＃13;

注意：将内容拆分为单个字符的代码不是我自己的。很长一段时间它是从Stack Overflow回答中挑选出来的，目前我还没有链接到它。

从左到右淡出文本的问题

1 个答案: