Question

当第二个单词出现时，我没有让第一个单词突然向左跳跃，而是逐字逐渐消失。

我已经将jfiddle包括在内以表明我的意思。 RailsCast Pry Debug

如果有人能告诉我如何解决这个问题，我将不胜感激。感谢。

<div class="headline">
Digital Journalist
</div>


var $title = $(".headline:first"), text = $.trim($title.text()),
words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "       </span>";
};
$title.html(html).children().hide().each(function(i){
  $(this).delay(i*900).fadeIn(700);
});
$title.find("span").promise().done(function(){
    $el.text(function(i, text){
       return $.trim(text);
    });            
});

Answer 1

这是因为

body {
    text-align: centre;
}

添加新单词时，会重新计算“中心”。

另请注意，您已为<a>分配了一个课程但未使用该课程。

尝试使用边距而不是text-align：

.subtitle {
    margin-left: 40%;
}

在http://jsfiddle.net/kdgm6rcm/1/

进行测试

如何在逐字消失时不使文字“跳跃”？

1 个答案: