簡單的jQuery幻燈片之間幻燈片轉換

我做了一個使用jQuery的幻燈片，並且一切都按預期工作...除了轉換。截至目前，幻燈片通過我的div，並添加/刪除imgs，直到幻燈片放映結束（此時，幻燈片「消失」）。這很好。但是，我希望讓過渡效果不那麼震撼。這是我迄今爲止所擁有的。簡單的jQuery幻燈片之間幻燈片轉換

HTML：

<div class="slideShow" id="slideshow"> 
<div class="showImg"> 
    <img src="http://paulmarique.be/dropbox/img/01.jpg" alt="" /> 
</div> 
<div> 
    <img src="http://paulmarique.be/dropbox/img/02.jpg" alt="" /> 
</div> 
<div> 
    <img src="http://paulmarique.be/dropbox/img/03.jpg" alt="" /> 
</div>

CSS：

body { 
    background-color: #e7e7e7; 
    text-align: center; 
} 

.slideShow > div:not(.showImg) { 
    display: none; 
} 

.showImg { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
.slideShow { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
}

的jQuery：

$(function() { 
    setTimeout(playSlideShow, 3000); 

    function playSlideShow() { 
     $('.showImg').removeClass('showImg').next('div').addClass('showImg'); 
    setTimeout(playSlideShow, 3000); 
    } 
});

Codepen：http://codepen.io/anon/pen/vGYKrO

它根本不轉換。我不明白我做錯了什麼，但我確信有人會很快指出我的錯誤。任何幫助將不勝感激。

*注意：我應該補充一點，我不想爲此使用任何插件。

來源

2016-02-27 ImmaGrumpyOldMan

兩件事情：

的CSS display財產不能轉移，它要麼是或不是。然而，您可以將visibility屬性與opacity（例如）一起過渡，以獲得良好的過渡效果。提示：visibility的過渡聲明將有一個持續時間0ms和一個不同的延遲取決於元素的狀態。
您正在更改.showImg元素的CSS屬性（通過更改元素的類），但是您已將transition聲明添加到.slideshow元素。您必須將transition屬性應用於其CSS已更改的元素。

來源

2016-02-27 00:34:26 Jasper

Doh。我設置不透明度爲0，並將過渡放在.showImg和div上：not（.showImg）。謝謝你，我保存了我的顯示器不被扔出窗外！ – ImmaGrumpyOldMan

簡單的jQuery幻燈片之間幻燈片轉換

回答

相關問題