刪除/添加類重新加載的不正確，除非絕對位置

Question

我創建了一個非常簡單的jQuery幻燈片，但是當從活動圖像中刪除一個類並放到下一個類時，我遇到了問題。

當圖像位置是相對：類被簡要地除去新圖像之後重新加載幻燈片

當圖像位置是絕對下方：幻燈片的導航會斷裂，這是毫不更長的動態！

Here is what it looks like when it's relative

Here is what it looks like when it's absolute

我怎麼會去解決這個問題？

Answer 1

與新的圖像前的最後完全消失出現在相對靠近接縫的問題，所以在容器中的新圖像的跳躍。我改變sliderResponse功能如下：

function sliderResponse(target) { 
    images.fadeOut(300).promise().done(function(){ 
    triggers.removeClass('selected').eq(target).addClass('selected'); 
    images.eq(target).fadeIn(300);   
    }); 
} 

我用準確的http://storeco.de/相同的代碼，只是改變了這一功能...

它的工作對鉻，我沒有在其他瀏覽器進行了測試但你可以嘗試。

這是因爲您有：

images.fadeOut(300).eq(target).fadeIn(300); 
triggers.removeClass('selected').eq(target).addClass('selected'); 

所以，當你淡出你只是不透明度，圖像的內容仍然存在，工作的時候你在newone褪色談到下一個，然後刪除（」選擇「）和addClass（」選擇「）做跳躍...... 如果你這樣做：

images.fadeOut(300).removeClass('selected').eq(target).fadeIn(300); 
triggers.removeClass('selected').eq(target).addClass('selected'); 

它也可以！

Answer 2

在你的CSS嘗試改變（在相對的例子）

.images li{ 
    position:relative; 
    width:100%; 
    top:0px; 
    left:0px; 
    float:left; 
    overflow:hidden; 
} 

要

.images{ 
    position:relative; 
    width:100%; 
    top:0px; 
    left:0px; 
    float:left; 
    height:639px; 
    overflow:hidden; 
    z-index:100; 
} 

而且

li { 
     list-style:none; 
} 

應該

ul { 
    list-style:none; 
} 

Answer 3

我認爲問題出在你的javascript中。相對位置是正確的，但是這是從你的腳本：

function sliderResponse(target) { 
     images.fadeOut(300).eq(target).fadeIn(300); 
     triggers.removeClass('selected').eq(target).addClass('selected'); 
    } 

這是同時設置圖像是針對300毫秒不同混濁可見，推頂一個下面的第二個，因爲它會消失。我認爲這將解決這個問題：

function sliderResponse(target) { 
     images.fadeOut(300); 
     setTimeout(images.eq(target).fadeIn(300), 300); 
     triggers.removeClass('selected').eq(target).addClass('selected'); 
    }