Question

我有一个提示的HTML列表，该列表中的每个元素都隐藏在页面加载中，然后尝试在指定时间后淡入3个随机提示但是提示在不同时间淡入淡出所有具有相同时序设置，为什么会发生这种情况？

这是我的来源：

<script type="text/javascript">
    this.randomtip = function () {
        var pause = 4000;
        var length = $("#tips li").length;
        var temp = -1;

        this.getRan = function () {
            // get the random number
            var ran = Math.floor((Math.random() * length) + 1);

            return ran;
        };
        this.show = function () {
            $("#tips li").fadeOut(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
            $("#tips li:nth-child(" + getRan() + ")").delay(1000).fadeIn(800);
        };

        show(); setInterval(show, pause);

    };

    $(document).ready(function () {
        $("#tips li").hide();
        randomtip();
    });
</script>

Answer 1

以下是您脚本的固定版本：

http://jsfiddle.net/thinkingsites/WPsN7/17/

您的问题如下：

淡化对异步的影响，所以你的淡化基本上都是在同一时间发生的。由于时机不完美，它们很快就会失去同步。
您的随机方法无法保证它会加载唯一的项目。这可以多次向同一个元素提供相同的命令。

为了解决这个问题，我使用了jQuery deferreds，这是jQuery动画的内置功能。这就是 .promis（）。done（）的含义。它比使用 .fade（interval，callback）更有用。它确保回调在上一个命令完成之前不会触发。这消除了对 setInterval 的需要，如果控制得不好，可能会导致问题。由于jQuery内置了它，因此它不是必需的。

Answer 2

使用'Thinking Sites'发布的代码后，一切似乎都没问题，但旧版本的Internet Explorer不支持'indexof'，所以下面是我在旧版Internet上运行的代码的修改版本资源管理器以及Chrome和Firefox：

<script type="text/javascript">
    var randomtip = function() {
    var pause = 4000;
    var length = $("#tips li").length;
    var temp = -1;

    this.getRan = function() {
        // get the random number
        var result = [];
        while (result.length < 3) {
            var r = Math.round((Math.random() * (length - 1)));
            if (!contains(result, r)) {
                result.push(r);
            }
        }
        return result;
    };

    var fadeout = function() {
        $("#tips li").delay(1500).fadeOut(800).promise().done(fadein);
    };

    var fadein = function() {
        var ran = getRan();
        $("li:eq(" + ran[0] + "),li:eq(" + ran[1] + "),li:eq(" + ran[2] + ")", "#tips").delay(1000).fadeIn(800).promise().done(fadeout);
        };

        fadein();
    };

    $(document).ready(function() {
        $("#tips li").hide();
        randomtip();
    });

    function contains(a, obj) {
        var i = a.length;
        while (i--) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }
</script>

JavaScript淡出时间

2 个答案: