的Jquery/JS故障时窗口

我用JS使显示3项一次一个简单的功能是不可见的。当您查看页面时效果很好，但是当您最小化或更改标签页然后返回时，会显示所有三项。的Jquery/JS故障时窗口

任何人都知道为什么？就好像fadeIn（x）继续运行，但hide（）停止工作。我甚至检查过不同的课程。

下面是代码：

$(document).ready(function() { 

function start() { 
    $(".featured-items").hide(); 
    $(".item-1").fadeIn('slow'); 
    setTimeout(one, 5000); 
} 
    function one() { 
    $(".featured-items").hide(); 
    $(".item-2").fadeIn('slow'); 
    setTimeout(two, 5000); 
} 
function two() { 
    $(".featured-items").hide(); 
    $(".item-0").fadeIn('slow'); 
    setTimeout(start, 5000); 
} 
setTimeout(start, 5000); 

});

问题解决了，检查下面的最佳答案，并请务必阅读评论，从而获得一个很好的理解。感谢所有

来源

2015-10-20 Helsing

有一个功能，使用模计数器3。 – vogomatix

动画排队并且不会运行，直到标签具有焦点。如果使用.fadeIn的回调，这可能不会发生（循环会直到返回实际上被暂停。） –

为什么淡入的作品，但隐藏queus像你说的吗？ – Helsing

（更新提供完整的答案）

您的原始代码过于复杂，以及更灵活和更简单的实现是只有一个功能，并在库项目的数组。其次，你应该修改你的代码，这样fadeIn动画立即开始，而不是排队。只有一个功能而不是几个功能可以更容易地进行修改。

注意，在下面的代码，如你的原代码，不同的画廊项目类，而不是单一的元素ID，并在多个项目可能会褪色。

var gallery = [ '.item-1', '.item-2', '.item-3' ]; 
var i = 0; 
function galleryEvent() { 
    $(".featured-items").hide(); 
    $(gallery[i]).fadeIn({duration: 'slow', queue: false}); 

    i = (i + 1) % gallery.length; 
    setTimeout(galleryEvent, 5000); 
} 

// start everything off.... 
galleryEvent();

来源

2015-10-20 14:56:36 vogomatix

感谢您解决这个问题。然而，仅仅为了教育目的，你是否知道为什么原始问题会发生？我仍然会使用你的解决方案，这是不言而喻的。 – Helsing

请检查我的解决方案，因为我只是在未经测试的情况下迅速将其解决。我不知道为什么你的不工作，但简化它可以更容易找到。您可以在函数启动时设置调试事件并检查其被触发。请注意，'.item-1'是一个类，不是一个单一的元素id - 你的意思是'＃item-1'吗？ – vogomatix

这不是一个答案 – Igor

的Jquery/JS故障时窗口

回答

相关问题