Javascript jquery淡出/淡出闪烁问题

我读过几篇关于这个的帖子，但似乎没有一篇能解决我的问题， 当我淡出一个图库时，另一个会淡入，效果很好…但淡入的项目在淡入动画完成后似乎会“刷新”或再次淡入（非常快），下面是我的代码：

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

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

html:

一切都很顺利，但有时在选定的div淡入后，由于某种原因，它会闪烁/闪烁一次

---

谢谢

对于这么简单的任务，您真的需要所有这些标记吗？如果您只需要淡入淡出一组图像，您可以执行以下操作：

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);
}

函数fadeInOut（）{
var imgs=$（'.mediaContainer>img'）；
imgs.wrapAll（“”）；
$（'.slideshow>img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.slideshow>img:first'）
.衰减（500）
.next（'img'））
法丹先生（500）
(完)
.appendTo（“.slideshow”）；
}, 5000);
}

---

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

您可以试试这个：

$(".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")        
});

---

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

不要使用500，它会工作得更顺畅，速度是600毫秒，正常是400毫秒

你能设置一个复制问题的程序吗？我有大约5个图库，每个图库都从数据库加载一个图像列表，所以有很多图像，按类别分组…我正在创建一个菜单来在不同类别之间切换啊，好的。。。嗯，我仍然认为你有太多的加价，但你可以在以后改进。每个浏览器都会出现问题？我在使用Webkit浏览器（Chrome）时遇到了一些褪色的问题

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);
}

$(".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")        
});