jQuery淡入淡出（作品在第二輪但不是第一次）

好吧，我主要處理的內容和一些前端設計，但我試圖把一個漂亮的圖像滑塊到iFrame到我們的網站。我能夠使用jQuery構建它，但我遇到了一個小問題。它應該有一個淡入淡出，但在第一次旋轉它只使用淡出。接下來的旋轉完美。jQuery淡入淡出（作品在第二輪但不是第一次）

這裏是我使用

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 



<script type="text/javascript"> 
$(document).ready(function(){ 
    slideShow(); 
}); 

function slideShow() { 

    var showing = $('#ContentContain2 .isshowing'); 
    var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 

    showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing'); 

    setTimeout(slideShow, 5000); 
} 

</script>

這裏是一個鏈接到它託管，所以你可以看到問題的代碼。

http://ksee.bimedia.net/sites/community/index.html

來源

2013-05-09 Travis Bewley

你隱藏在運行插件之前的圖像？你已經看不到任何東西了！ – adeneo 2013-05-09 16:09:35

試着隱藏他們所有的第一（你消失在他們之前）。我認爲這是罪魁禍首，這可以解釋爲什麼他們在第一輪被淡出之後會淡入（而不是之前）。你不能從完全不透明的「淡入」。

$(document).ready(function(){ 
    $("#ContentContain2").children("img").not(".isshowing").hide(); // hide em 
    slideShow(); 
}); 

function slideShow() { 

    var showing = $('#ContentContain2 .isshowing'); 
    var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 

    showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing'); 

    setTimeout(slideShow, 5000); 
}

來源

2013-05-09 16:10:16

我想補充以下一個CSS文件（或只是套用樣式的單個元素）：

#ContentContain2 img 
{ 
display: none; 
} 

#ContentContain2 img.isshowing 
{ 
display: inline; 
}

這將有效地做什麼啓航建議用代碼來執行：它將隱藏元素，直到調用fadeIn。

另外，你是否知道img2是實際顯示的第一個東西？如果您希望img1先顯示，我會將您的isshowing類移至img4，這樣腳本就會淡入到img1中。

編輯：這裏有一個的jsfiddle證明： http://jsfiddle.net/Efbt3/

來源

2013-05-09 16:32:54

jQuery淡入淡出（作品在第二輪但不是第一次）

回答

相關問題