Question

我有一个小功能，可以在网页上显示随机文字。您会看到它在http://jsfiddle.net/argilmour/qvxhakjv/

中有效

var names = ["Harrogate", "Skipton", "York", "Northallerton", "Keighley", "Leeds", "Bradford", "Huddersfield", "Wakefield", "Sheffield"]
var namestemp = []
var randomIntervalLowerVal = 1100;
var randomIntervalUpperVal = 1500;
var currentSlideDirection = "left";

var site = {

    init: function () {

        setTimeout(function () { site.displayAndSpliceArrayItem() }, site.getRandomNum(randomIntervalLowerVal, randomIntervalUpperVal));
    },
    getRandomNum: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    },
    displayAndSpliceArrayItem: function()
    {

        $("#randomNumber h1").fadeOut("slow");
        setTimeout(function () {

            $("#randomNumber")[0].innerHTML = "";

            var randomNum = site.getRandomNum(0, names.length - 1);
            $("#randomNumber").append("<h1 style='display:none;'>" + names[randomNum] + "</h1>");
            $("#randomNumber h1").show("slide", { direction: currentSlideDirection }, 1000);
            namestemp.push(names[randomNum]);
            names.splice(randomNum, 1);

            if (currentSlideDirection == "left") currentSlideDirection = "up";
            else if (currentSlideDirection == "up") currentSlideDirection = "right";
            else if (currentSlideDirection == "right") currentSlideDirection = "down";
            else currentSlideDirection = "left";

            if (names.length == 0) {
                names = namestemp;
                namestemp = [];
            }

            site.displayAndSpliceArrayItem();

        }, site.getRandomNum(randomIntervalLowerVal, randomIntervalUpperVal));
    }
}

$(document).ready(function () {
    site.init();
});

一切正常，只是在文本消失之前，它似乎只是略微跳起来。我试图得到这个，所以文本进来，显示，然后顺利消失。

任何帮助将不胜感激。

Answer 1

看起来这是一个定位问题，将该行添加到fadeOut行

$("#randomNumber").css('position', 'absolute');

$("#randomNumber h1").fadeOut("slow");

Answer 2

添加此

  h1 {
         text-align: center;
         position: absolute; /* added code*/
         font-size:1000%
    }

Fiddle

褪色文字顺利

2 个答案: