jquery - Jqueryアニメーションシフトテキスト

Question

animate を使用して HTML の一部を変更すると、jquery animate はテキストを単に置き換えるのではなく、テキストを「移動」/シフトします。

ここをチェックしてください：http://jsfiddle.net/x2VYn/

    function cycleIntro() {
        var whoArr = ["colleagues", "girlfriend", "homies", "nemesis", "lover", "dad", "mom", "brother", "sister", "enemies", "friends", "classmates", "best friend", "imaginary friend", "grandma'"];
        var whatArr = ["pool", "backgammon", "dart", "chess", "ping pong", "bob", "headsup poker", "ludo", "yatzy", "foosball", "tennis", "street basket", "golf", "water polo"];

        var whotxt = whoArr[Math.floor(Math.random() * whoArr.length)];
        while ($("#intro #who").html() == whotxt) {
            whotxt = whoArr[Math.floor(Math.random() * whoArr.length)];
        }
        var whattxt = whatArr[Math.floor(Math.random() * whatArr.length)];
        while ($("#intro #what").html() == whattxt) {
            whattxt = whatArr[Math.floor(Math.random() * whatArr.length)];
        }
        $("#intro #who").animate({ width: "toggle" }, 200, function () {
            $("#intro #who").html(whotxt).animate({ width: "toggle" }, 300, function () {
                $("#intro #what").delay(50).animate({ width: "toggle" }, 200, function () {
                    $("#intro #what").html(whattxt).animate({ width: "toggle" }, 300, function () {
                        setTimeout(cycleIntro, 1500);
                    });
                });
            });
        });
    }
    setTimeout(cycleIntro, 1500);

これを調整する方法を知っている人はいますか？

Answer 1

vertical-align操作しているスパンのプロパティを設定してbottom、問題を修正します。ここでフィドルを更新しました。