jquery淡出/淡入闪烁问题答案

【问题标题】：jquery fadeout/fadein flicker issuejquery淡出/淡入闪烁问题
【发布时间】：2013-01-01 23:51:43
【问题描述】：

我已经阅读了几篇关于此的帖子，但似乎没有一个可以解决我的问题，当我淡出一个画廊时，另一个淡入，效果很好......但是在淡入动画完成后，淡入的项目似乎“刷新”或再次淡入（非常快），这是我的代码：

我所拥有的基本上是一个包含在“mediaContainer”中的照片库（photographySection），这是 css：

.mediaContainer {
   position: relative;
}
.photographySection {
    top: 10px;
    left:0;
    position: absolute;
}

html:

 <div class='mediaContainer'>              
       <div class='photographySection hidden' id='photographyExperimental'>
            <ul><li><img src...></li></ul>
        </div>
        <div class='photographySection hidden' id='photographyFaces'>
             <ul><li><img src...></li></ul>
        </div>
 </div>

js:

$(".photographyMenu").click(function(event){
    $(".photographySection").hide(1,function() { // hide all sections
        var section = $(event.target).attr("section"); // read new section to show
        $("#"+section).fadeIn(500); // for example $("#photographyFaces")
    }); 
});

一切运行顺利，但有时在所选 div 淡入后，由于某种原因它会闪烁/闪烁一次

谢谢！

【问题讨论】：

你能设置一个Fiddle 来重现问题吗？

标签： javascript jquery css fadein fadeout

【解决方案1】：

对于这样一个简单的任务，您真的需要所有这些标记吗？如果你想要的只是淡入淡出一堆图像，你可以这样做：

html 标记：

<div class="mediaContainer">
    <img src="" />
    <img src="" />
    <img src="" />
</div>

jQuery:

function fadeInOut(){
    var imgs = $('.mediaContainer > img');
    imgs.wrapAll('<div class="slideshow" />');

    $('.slideshow > img:gt(0)').hide();
    setInterval(function(){
        $('.slideshow > img:first')
            .fadeOut(500)
            .next('img')
            .fadeIn(500)
            .end()
            .appendTo('.slideshow');
    }, 5000);
}

也许更有经验的人可以改进此代码。您还可以将 vars 设置为那些“幻数”（500/5000）和其他一些东西，但这应该可以用更少的代码解决问题（只是一个选项）。

【讨论】：

我有大约 5 个画廊，每个画廊都从数据库中加载图像列表，所以有很多图像，按类别分组...我正在创建一个菜单来在不同类别之间切换
啊，好吧...好吧，我仍然认为你有太多的标记，但你可以稍后改进。每个浏览器都会出现问题？我在使用 Webkit 浏览器 (Chrome) 时遇到了一些逐渐消失的问题

【解决方案2】：

只是不要使用500，它会更流畅，慢是600毫秒，正常是400毫秒

【讨论】：

【解决方案3】：

你可以试试这个：http://jsfiddle.net/S4sbm/

$(".photographySection:gt(0)").hide();
    $(".photographyMenu").click(function(event){   
    $(".photographySection").fadeOut(500);    
    var section = $(event.target).attr("section"); // read new section to show         
    $("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")        
});

检查小提琴，看看这是否有帮助。

【讨论】：