jQuery循环幻灯片在页面加载时重叠 [英] jQuery Cycle Slides overlap on page load

问题描述

我在许多项目中使用了 jQuery Cycle 。这一次，我得到了一个真正奇怪的视觉故障。在页面加载时，所有幻灯片都显示在彼此之上，然后当脚本循环浏览每个幻灯片时，它最终会自行修复（直到页面重新加载）。有关示例和代码，请点击此处。下面的图片显示了所有浏览器中发生的问题（在Firefox 4，Safari 5，Chrome 10，IE8中测试）

I have used jQuery Cycle in numerous projects. This time round I am getting a really bizarre visual glitch. On page load, all the slides are shown on top of each other, then as the script cycles through each slide, it eventually fixes itself (until the page is reloaded). For the example and code click here. The image below shows the glitch which seems to be happening in all browsers (tested in Firefox 4, Safari 5, Chrome 10, IE8)

为每个幻灯片添加背景颜色 div 修复的问题，因为它隐藏了其他幻灯片，但它不是一个真正的解决方案，在我看来。

Adding a background colour to each slide div does "fix" the problem in that it hides the other slides, but it isn't really a proper solution in my opinion.

这一整天下午与战斗，有点损失。

Been battling with this all afternoon and I'm at a bit of a loss. Any help would be greatly appreciated.

感谢

推荐答案

同样的问题，但固定它通过跟踪Truk的答案设置每个幻灯片显示：无（除了第一个），而不是改变它在页面加载显示内联，你在循环调用如下： p>

I had the same problem, but fixed it by following Truk's answer in setting each slide to display: none (except the first one), but instead of changing it to display inline on page load, you do it in the cycle call as follows:

 $(document).ready(function(){
    $('#header-content').cycle({
        fx: 'custom', 
          cssBefore: { left: 384, display: 'block' }, 
          animIn:  { left: 0}, 
          animOut: { left: -384 }
    });
})

希望这可以帮助别人！

这篇关于jQuery循环幻灯片在页面加载时重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！