0

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

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

谢谢！

4

3 回答 3

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

于 2012-12-26T10:33:26.333 回答
1

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

于 2013-01-01T15:51:43.283 回答
0

你可以试试这个：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")        
});

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

于 2012-12-26T11:10:32.313 回答