jquery fadeout/fadein閃爍問題

我已經閱讀了幾篇文章，但似乎沒有解決我的問題，當我淡出一個畫廊，其他淡入，工作正常......但淡入的項目似乎「刷新」或淡入動畫完成後再次（真正的快）淡入，這裏是我的代碼：jquery fadeout/fadein閃爍問題

我有什麼基本上是包含在「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中消失後，它閃爍/出於某種原因閃爍一次

的感謝！

來源

2012-12-26 roy naufal

你能建立一個[** **菲德爾（http://jsfiddle.net），其再現問題？ – adeneo

你真的需要所有的標記來完成這麼簡單的任務嗎？如果你想要的是剛剛褪去了一堆進出的圖像，你可以做這樣的事情：

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

也許更有經驗的人能改進此代碼。你也可以將變量設置爲那些「幻數」（500/5000）和其他一些東西，但是這應該用更少的代碼來解決問題（只是一個選項）。

來源

2012-12-26 10:33:26 rafaelbiten

我有大約5個畫廊，每個畫廊都從數據庫加載圖像列表，所以有很多圖像，按類別分組......我正在創建一個菜單以在不同類別之間切換 –

啊，好的...那麼，我仍然認爲你有太多的標記，但你可以稍後改進。問題發生在每個瀏覽器中？我一直在使用Webkit瀏覽器面臨一些問題（Chrome） – rafaelbiten

你可以試試這個：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-26 11:10:32 Jai

只要不使用的500，它會工作更流暢，速度慢是600miliseconds和正常是400miliseconds

來源

2013-01-01 15:51:43 user1940007

jquery fadeout/fadein閃爍問題

回答

相關問題