Question

我正在尝试制作一个幻灯片，它会在几个绝对定位的div之间消失。在Chrome，IE9，Opera下面的代码工作正常。但是在Firefox上，超时会持续一两次，然后停止。如果你删除下面标记的JS部分，它会正确循环。

<style>
.slide {position:absolute; top:0; left:0; width:300px; height:200px}
</style>
<div id="slides" class="slides">
<div class="slide slide1" style="background:#c66">
  <div class="swap_links">
    <a href="javascript:" class="active">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide2" style="background:#6c6">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:" class="active">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide3" style="background:#36c">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:" class="active">3</a>
  </div>
</div>
</div>
<script type="text/javascript">
$(function() {

    var fp = '#slides .slide';
    var fs = 300;

    var t = window.setTimeout(swap, 1000);

    $(fp).slice(1).hide();

    function swap(to) {

        //removing this section, loop plays in FF
        if (to) {
            $(fp + to).fadeIn(fs);
            $(fp).not('.slide' + to).fadeOut(fs);
            window.clearTimeout(t);
            return;
        }

        $(fp).eq(1).fadeIn(fs);
        $(fp).eq(0).fadeOut(fs, function() {
            $(this).appendTo('#slides');
            t = window.setTimeout(swap, 1000);
        });

    }

    $('#slides .swap_links a').click(function() {
        swap($(this).html());
    });

});
</script>

Answer 1

FireFox似乎已将任意数值传递给函数中的to变量，导致if(to){...}语句在传递的值不是0时执行。

要解决此问题，请执行setTimeout（）中不带参数的swap()函数，如下所示：

var t = window.setTimeout(function(){ swap(); }, 1000);

以下是更新的演示：http://jsfiddle.net/x6PCD/14/

我希望这有帮助！

Firefox setTimeout + jQuery淡入循环不一致，提前停止，不会循环

1 个答案: