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

私が抱えている問題は、アニメーション中に反転している単語の周りの単語が移動していることです...

おそらくフェードアウトとおそらく高さの変化に関係していると推測していましたが、私の人生では解決策が見つかりませんでした...

「フリッパー」クラス要素で単語をスムーズに変更したいだけです-フェードアウトし、右のテキストが収まるように幅を調整し、フェードインします.

このためのプラグインも見つかりませんでした:/

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 に答える