JQuery滑塊故障 - 跳轉

我下面的滑塊似乎沒有正常工作。從一張幻燈片切換到另一張幻燈片時出現故障。這裏是我的代碼：https://jsfiddle.net/tiffsaw/6y5Ltvev/JQuery滑塊故障 - 跳轉

任何幫助將不勝感激。非常感謝！

$(document).ready(function(){ 
$('.slides').first().addClass('active'); 
$('.slides').hide();  
$('.active').show(); 

$('.right').click(function(){ 
$('.active').removeClass('active').addClass('oldActive');  
       if ($('.oldActive').is(':last-child')) { 
    $('.slides').first().addClass('active'); 
    } 
    else{ 
    $('.oldActive').next().addClass('active'); 
    } 
$('.oldActive').removeClass('oldActive'); 
$('.slides').fadeOut(); 
$('.active').fadeIn(); 


    }); 

});

來源

2016-02-12 tiffsaw

發生這種情況，因爲$('.slides').fadeOut();和$('.active').fadeIn();都在同一時間發生。之前的幻燈片的一個完全淡出，其他人會打斷淡出，然後淡入

我通過簡單地增加延遲到淡出，這樣的固定它。

$('.active').delay(500).fadeIn();

這會在實際觸發前等待500毫秒，使淡出發生。這是一個fiddle它顯示了這一點。

來源

2016-02-12 05:32:37

非常感謝你@凱文！我遇到另一個問題，那就是我的引號在轉換時跳躍一點。我不確定爲什麼會發生這種情況，你知道爲什麼嗎？謝謝 – tiffsaw

問題是你的幻燈片塊。當第一張幻燈片fadeOut（顯示：無）。底部幻燈片出現並在淡出動畫期間顯示小毛刺（白色空間）。

解決方案：將所有幻燈片放在父塊中，並使用下面的樣式定位所有幻燈片。

.sliderContainer { position: relative;} /*parent container*/ 
.slides { position: absolute; top: 0; left: 0;} /*postion all slides to top*/

我更新了你的小提琴。 jsFiddle

來源

2016-02-12 05:47:43

非常感謝！ – tiffsaw

JQuery滑塊故障 - 跳轉

回答

相關問題