0

此处示例（查看标题）：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”类元素平滑地改变单词——淡出，调整宽度，使文本适合，淡入。

也找不到这个插件：/

4

2 回答 2

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);

}

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

于 2012-04-04T01:28:33.277 回答
0

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

于 2012-04-04T01:08:46.903 回答