Question

我有一个<h1>，其中文本first part of titel应该淡入，然后经过一段时间延迟，标题的第二部分应该淡入，以便标题看起来像first part of titel second part of titel。

我不知道如何以编程方式解决此问题。我尝试了回调promise()，但无法正常工作。

这是我拥有的最后一个工作代码：

const $this = $('h1');
const $span = $('h1 span');
$this.delay(700)
  .fadeOut(0, () => {
    $this.html('First part of<br>text');
    $this.css("color", "#000");
  })
  .fadeIn(500)
  .delay(4000)
  .fadeOut(0)
  .fadeIn(500, () => {
    $this.html('First part of<br>text second part of text');
  })
  .delay(5000)
  .fadeOut(500, () => {
    $this.html('A different text');
    $this.css("color", "#000");
  })
  .fadeIn(500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1><span></span></h1>

jsFiddle：https://jsfiddle.net/0m4z59xe/

Answer 1

您需要为要淡入或淡出的每个零件创建一个跨度。 Here，您可以找到我的意思的例子。

var fadeInterval = 300

$('h1').html(function(_, txt){
    var words= $.trim(txt).split(' ');
    return  '<span>' + words.join('</span> <span>') + '</span>';
}).find('span').each(function(idx, elem){        
    $(elem).delay(idx * fadeInterval).fadeIn();
});

jQuery fadeIn，fadeOut问题：<h1>的第二部分不能正常工作

1 个答案: