jquery - Smoothley 为跨度设置动画以使其文本与 jquery 匹配

Question

我创建了一个刽子手游戏，每个字母都在一个跨度中。

HTML

<span class="letter">A</span>

CSS

.letter{
    height:40px;
    width:40px;
    line-height:40px;
    text-align:center;
}

谜题解决后，我想将字母并排移动以形成单词，我还需要调整跨度以适应其文本（即一个字母）以避免多余的空格。删除包含高度和宽度的类会得到我需要的结果，但问题是我想顺利地做到这一点。

Answer 1

克隆元素，将克隆宽度设置为auto并测量宽度。然后将其删除，并将原件设置为该宽度。

像这样的东西：

$('span.letter').each(function(){
    var temp = $(this).clone();
    $('body').append(temp);
    temp.css('width', 'auto');
    var newWidth = temp.width();
    temp.remove();
    $(this).animate('width', newWidth);
});