jQuery 宽度变化（动画）导致 Firefox/IE 中的垂直移动有什么线索吗？答案

【问题标题】：jQuery width change (animation) causes vertical shift in Firefox/IE Any clues?jQuery 宽度变化（动画）导致 Firefox/IE 中的垂直移动有什么线索吗？
【发布时间】：2012-04-04 01:01:14
【问题描述】：

此处的示例（查看标题）：http://brendonoliverlamb.com/

使用此代码：

    $('.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”类元素平滑地更改单词-淡出，调整宽度以使文本适合，淡入。

也找不到此插件：/

【问题讨论】：

请向我们展示相关的 HTML。

标签： javascript jquery width shift

【解决方案1】：

我发现了几个问题。在某些浏览器中，当您切换到较长的单词时会发生自动换行，而在所有浏览器中，都会出现垂直对齐问题。可以在这里以更孤立的方式看到问题：http://jsfiddle.net/jfriend00/BSmwF/，您可以清楚地看到只有当较长的单词替换较短的单词导致临时换行时才会发生跳转。

我还大大简化了代码，无需进行包装和展开。

如果您添加这个防止自动换行并修复对齐问题的 CSS，问题就会消失：

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

这里的工作演示：http://jsfiddle.net/jfriend00/EgfYU/

而且，我改用更简单的代码，没有包裹/展开并使用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);

}

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

【讨论】：

质量工作先生，我的头撞到那个太久了哈哈。很高兴我开了这个帐户:)。
@godofleet - 因为你是新来的，你知道 StackOverflow 的工作方式是问题作者应该评估发布的答案，如果他们的问题得到回答，他们应该选择单击答案左侧的复选标记将答案作为“最佳答案”。这会奖励回答者一些声誉积分，为您遵循正确的 StackOverflow 协议提供一些声誉积分，并向未来的读者展示哪个答案最适合您。获得更多声望点后，您还可以对所有有帮助的答案进行投票。

【解决方案2】：

我认为这可能与 jQuery 在动画中的某个时间点将 spans 设置为 display: block 有关。如果您设置.flipper {display: inline !important}，它似乎对我有用。

【讨论】：

我实际上在不久前尝试过这个解决方案，并认为它也可以工作，但是由于某种原因它破坏了平滑的滑动动画......我认为 jquery animate 如何工作需要块级元素或至少内联块。