jQuery FadeOut FadeIn

我搞亂了html，css和jquery，而且我在這個問題上運行過。我有一個幻燈片顯示使用容器中的fadeIn和fadeOut獲取圖像，但是當我按下'next'時，它將重置頁面並在底部的某處加載下一個圖像。你能告訴我有什麼問題嗎？jQuery FadeOut FadeIn

HTML

<div class="slideshow "> 
<div class="container"> 
<div class="slides"> 
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg"> 
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg"> 
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg"> 
<img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW"> 
</div> 
</div> 



<div class="container "> 
<ul class="slider-dots"> 
<a href="#/" class="arrow-prev"><<</a> 
    <li class="dot active-dot">&bull;</li> 
    <li class="dot">&bull;</li> 
    <li class="dot">&bull;</li> 
    <li class="dot">&bull;</li> 
<a href="#/" class="arrow-next">>></a> 
</ul> 
</div> 
</div>

的jquery

var main=function(){ 
$('.arrow-next').click(function(event){ 
    event.stopPropagation(); 
    var currentSlide=$('.active-slide'); 
    var nextSlide=$('.active-slide').next(); 

    var currentDot=$('.active-dot'); 
    var nextDot=currentDot.next(); 

    if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();} 

    currentSlide.fadeOut().removeClass('active-slide'); 
    nextSlide.fadeIn().addClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    nextDot.addClass('active-dot'); 


}); 

$('.arrow-prev').click(function(event){ 
    event.stopPropagation(); 
    var currentSlide=$('.active-slide'); 
    var prevSlide=currentSlide.prev(); 

    var currentDot=$('.active-dot'); 
    var prevDot=currentDot.prev(); 

if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();} 

    currentSlide.fadeOut().removeClass('active-slide'); 
    prevSlide.fadeIn().addClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    prevDot.addClass('active-dot'); 

});

};

$（document）.ready（main）;

你可以看到這一切在這個 fiddlehttp://jsfiddle.net/1zLd58yo/

來源

2015-06-14 Justplayit94

請發表你的代碼，並*不*只是一個的jsfiddle – andlrc

'event.defaultPrevented'是不是你停止默認行爲。可能是在https://api.jquery.com/event.stoppropagation之後，或者只是在處理程序結束時返回false。 – GillesC

它具有相同的行爲。我懷疑，不知何故，CSS中的顯示規則與它有關。 – Justplayit94

看起來像你有一個淡出然後淡入。淡出後，圖像消失，然後出現一個新圖像。淡出後有重繪/發生。

應用以下css規則來解決您的問題。

在div.slides， - 設置一個固定的寬度和高度 - 設置位置相對於

在圖像， - 設定位置=絕對

來源

2015-06-14 09:37:41 GeeDawg

當按鈕被點擊時，在當前圖像下產生的圖像怎麼樣？你認爲你有什麼想法嗎？ – Justplayit94

重繪沒有出現，但圖像右移一定數量，我希望它會留在我的div。我將修改小提琴以顯示結果。 – Justplayit94

如果你將位置設置爲絕對值，所有的圖像將會相互排在一起，所以下面不會有任何產卵。 – GeeDawg

設置在div滑動至特定的高度，然後將fadeIn添加到fadeOut之後的函數中，這將確保高度不會變得太大。這樣可以避免將位置設置爲絕對。

currentSlide.fadeOut().removeClass('active-slide', function(){ 
    prevSlide.fadeIn().addClass('active-slide'); 
});

第一張幻燈片將徹底淡出那麼下一個會淡入。

來源

2016-03-03 16:55:43 Josh

jQuery FadeOut FadeIn

回答

相關問題