Javascript jQuery宽度变化（动画）导致Firefox/IE垂直移动有任何线索吗？

此处示例（查看标题）：

使用此代码：

    $('.flipper').wrap('<span id="tmp"></span>');
    $('#tmp').css({ width: $('.flipper').outerWidth() + 'px' });
    $('.flipper').fadeOut(500, function () {
        $(this).html(flipWords[flipperCountCurrent]);
        $('#tmp').animate({ width: $(this).outerWidth() + 'px' }, 250);
        $(this).fadeIn(500, function () {
            $(this).unwrap();
        });
    });

$（'.flipper'）.wrap（''）；
$（'#tmp'）.css（{width:$（'.flipper'）.outerWidth（）+'px'}）；
$（'.flipper'）。淡出（500，函数（）{
$（this.html（flipWords[flipperCountCurrent]）；
$（'#tmp'）.animate（{width:$（this）.outerWidth（）+'px'}，250）；
$（this）.fadeIn（500，函数（）{
$（this.unwrap（）；
});
});

我遇到的问题是，在动画中，正在翻转的单词周围的单词正在移动

我猜这可能与淡出和身高的变化有关，但对于我来说，我还没有找到解决办法

我只想让“flipper”类元素平滑地更改单词-淡出，调整宽度，使文本适合，淡入

---

也找不到用于此的插件：/

我认为这可能与jQuery在动画中的某个时间点将

span

s设置为

display:block

有关。如果您设置

.flipper{display:inline！important}

它似乎对我有效。

我发现了几个问题。在某些浏览器中，切换到较长的单词时会出现换行，而在所有浏览器中，都会出现垂直对齐问题。我们可以从一个更孤立的角度来看待这个问题：只有当一个较长的单词替换了一个较短的单词时，才会出现跳转，从而导致临时换行

我还大大简化了代码，不需要包装和展开

如果添加此CSS，则问题会消失，因为它可以防止单词换行并修复对齐问题：

.flipper {
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}

在此进行工作演示：

而且，我改为不使用wrap/unwrap的更简单的代码，并使用了

fadeTo（）

，因此跨度仅更改了其不透明度，并且从未设置为

display:none

：

//Flipper
var flipWords = ["a professional", "an experienced", "an innovational", "an enthusiastic"];


//Do not edit below//
//set initial
$(".flipper").html(flipWords[0]);
var flipperCountCurrent = 0;
setTimeout(flipper, 1500);
function flipper() {

    if (flipperCountCurrent < flipWords.length - 1) {
        flipperCountCurrent += 1;
    } else {
        flipperCountCurrent = 0;
    }

    //no animation
    // $(".flipper").html(flipWords[flipperCountCurrent]);

    var flipperSpan = $('.flipper');
    var origWidth = flipperSpan.width();
    flipperSpan.fadeTo(500, 0, function () {
        flipperSpan.html(flipWords[flipperCountCurrent]).css("width", "auto");
        var newWidth = flipperSpan.width();
        flipperSpan.width(origWidth)
            .animate({ width: newWidth + 'px' }, 250)
            .fadeTo(500, 1);
    });

    setTimeout(flipper, 1500);

}

//翻转器
var flipWords=[“专业人士”、“经验丰富”、“创新人士”、“热情人士”]；
//不要在下面编辑//
//起首字母
$（“.flipper”）.html（flipWords[0]）；
var flipperCountCurrent=0；
设置超时（翻转器，1500）；
函数翻转器（）{
if（flipperCountCurrent

---

注意，我修改了计时器时间，以便在调试时更快地循环。

请向我们展示相关的HTML。质量工作先生，我的头撞在上面的时间有点太长了哈哈。很高兴我开设了这个帐户：）。@godofleet-既然你是新来的，你知道StackOverflow的工作方式是，问题撰写者应该评估发布的答案，如果他们的问题得到了回答，他们应该点击答案左侧的复选标记，选择一个答案作为“最佳答案”。这将奖励回答者一些信誉点，为您提供遵守适当StackOverflow协议的信誉点，并向未来的读者展示哪个答案最适合您。一旦你有了更多的声望点，你也可以对所有有帮助的答案进行投票。实际上我不久前尝试过这个解决方案，并认为它也能起作用，但由于某种原因它破坏了平滑滑动动画。。。我认为jqueryanimate如何工作需要块级元素或至少是内联块。