JavaScript淡入淡出時間

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/

你的問題如下：

1. 上的異步法茲工作，所以你基本上淡出一切發生在同一時間。由於時機並不完美，他們很快就失去了同步。
2. 你的隨機方法不能保證它會加載唯一的項目。這可以給同一個元素多次提供相同的命令。

爲了解決這個問題，我使用了jQuery deferreds，一個內置的jQuery動畫功能。這就是.promis（）。done（）是。它比使用更具功能.fade（間隔，回調）它確保回調不會觸發，直到先前的命令完成。這消除了setInterval的需要，如果控制不好，可能會導致問題。由於jQuery內置了這個功能，所以不是必須的。

Answer 2

使用發表「思想網站」代碼後，一切似乎是好的，但舊版本的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>