Question

此处示例（查看标题）：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();
        });
    });

我遇到的问题是在动画期间翻转的单词周围的单词正在移动......

我猜也许它与fadeOut有关，也许是高度变化，但对于我的生活，我还没有找到解决方案......

我只是希望“鳍状肢”类元素能够平滑地改变单词 - 淡出，调整宽度使右边的文本适合，淡入。

找不到这个插件：/

Answer 1

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

我还大大简化了代码，不需要换行和解包。

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

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

此处的演示演示：http://jsfiddle.net/jfriend00/EgfYU/

并且，我更改为更简单的代码而没有包装/解包并使用fadeTo()因此，span只更改了它的不透明度并且永远不会设置为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);

}

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

Answer 2

我认为这可能与jQuery在动画中的某个时刻将span设置为display: block有关。如果你设置.flipper {display: inline !important}，它似乎适合我。

jQuery宽度变化（动画）导致Firefox / IE中的垂直移位任何线索？

2 个答案: