Question

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

我所拥有的基本上是一个包含在'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消失之后，由于某种原因它会闪烁/闪烁

谢谢！

Answer 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）和其他一些东西，但这应该用更少的代码解决问题（只是一个选项）。

Answer 2

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

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

结帐小提琴，看看这是否有帮助。

jquery fadeout / fadein闪烁问题

3 个答案: