JQuery 无限循环 - 不透明度降低到几乎为 0答案

【问题标题】：JQuery infinite loop - opacity reduces to almost 0JQuery 无限循环 - 不透明度降低到几乎为 0
【发布时间】：2012-08-27 05:54:27
【问题描述】：

我在页面上有许多 div，它们使用 JQuery 淡入/淡出和随机函数随机无限循环背景（在我的示例中是 bg 颜色，但我将在最终产品中使用 bg 图像）。

我的问题是，如果循环停留大约 30 秒，您会看到背景不透明度降低到几乎为 0，从而产生一个空白空间。 IE8更差，Chrome也是个问题（IE9和Safari还需要测试）。

谁能解释为什么会发生这种情况以及（同样重要的是）如何解决它？

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title> Background image loop</title>

  <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){

    var InfiniteRotator =
    {
        init: function()
        {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 3000;

            //interval between items (in milliseconds)
            var itemInterval = 1000;

            //cross-fade time (in milliseconds)
            var fadeTime = 2000;

            //count number of items
            var numberOfItems = $('.rotating-item').length;

            //set current item
            var currentItem = 1;

            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1;
            currentItem = (currentItem+rand) % numberOfItems;

            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

    InfiniteRotator.init();

});
//]]>  

</script>


  <style type='text/css'>
    #rotating-item-wrapper {
    list-style-type:none;
    margin:0;
    padding:0;
    height: 150px;
}  
li{
    float: left;
    width: 148px;
    height: 150px;
    margin: 0 0 0 6px;
    padding: 0;
    position: relative;
}
li div {  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.rotating-item{            
    display: ;
    position: absolute;
    width: 148px;
    height: 150px;
  }
  </style>
</head>
<body>
  <ul id="rotating-item-wrapper">
    <li>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
        <div class="rotating-item" style="background-color: purple;"></div>
        <div class="rotating-item" style="background-color: brown;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: black;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
        <div class="rotating-item" style="background-color: purple;"></div>
        <div class="rotating-item" style="background-color: brown;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: black;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
    </li>
</ul>

</body>


</html>

【问题讨论】：

标签： jquery opacity infinite-loop

【解决方案1】：

发生这种情况是因为您的随机数生成可以产生与以前相同的数字。然后您的图像会淡出，之后它会再次淡入。

您必须修复随机数生成以不允许再次出现最后一个数字。

对于时间问题和 jQuery，我总是推荐使用这个新插件 jquery-timing。使用该插件，您的完整代码（具有固定随机选择）缩小为：

$.fn.random = function(){
    return this.eq(Math.floor(Math.random()*this.length));
}

$('.rotating-item').hide().first().fadeIn(initialFadeIn);
$('.rotating-item').repeat(itemInterval).fadeOut(fadeTime)
    .siblings().random().fadeIn(fadeTime).until($);

还有一个similar example in the documentation的插件。

【讨论】：

谢谢@peter，但是，运气不好。代码似乎在最后一行中断 - 我收到此错误“Uncaught TypeError: Object [object Object] has no method 'repeat'”，我找不到任何调试方法。 $(document).ready(function(){ $.fn.random = function() { return this.eq(Math.floor(Math.random() * this.length)); }; $(function() { $('.rotating-item').hide().first().fadeIn(1000); $('.rotating-item').repeat(2000).fadeOut(1000) .siblings().random() .fadeIn(2000).until($); }); });如果我删除“重复”，那么“直到”会出现同样的错误
嗨，你只是忘了包含那个计时插件。它只有一条线。见creativecouple.github.com/jquery-timing/#include
我有插件参考。我仍然收到“无方法重复”错误。另一个问题是 div 都在彼此之上（因为绝对定位）但它们应该相对于它们的父
.