0

我有一个 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>
4

2 回答 2

1

这是您的脚本的固定版本：

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

您的问题如下：

  1. 淡入淡出是异步工作的，所以你的淡入淡出基本上都是同时发生的。由于时机不完美，它们很快就会不同步。
  2. 您的随机方法不能保证它会加载独特的项目。这可能会多次向同一个元素发出相同的命令。

为了解决这个问题，我使用了 jQuery deferreds，这是 jQuery 动画的内置功能。这就是.promis().done()是什么。它比使用.fade(interval,callback)更实用。它保证回调不会触发，直到之前的命令完成。这消除了对setInterval的需要，如果控制不好，可能会导致问题。由于 jQuery 内置了它，所以它不是必需的。

于 2012-06-25T15:51:08.943 回答
0

使用“Thinking Sites”发布的代码后，一切似乎都很好，但旧版本的 Internet Explorer 不支持“indexof”，所以下面是我修改后的代码版本，它也适用于旧版本的 Internet Explorer作为 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>
于 2012-06-25T14:20:41.570 回答