在同一個地方淡入/淡出元素

我有一個無序列表，設置爲全屏，每個li都有一個重複的背景圖案。一旦頁面加載完成，我希望每個li每20秒就會淡入/淡出。我jsfiddle：http://jsfiddle.net/uWwfv/1/在同一個地方淡入/淡出元素

我試過css的方式（我的li元素的絕對定位），但它不能用我的全屏腳本，所以需要純jQuery淡入/出每個li。我該怎麼做？

全屏代碼：

function fitElements() { 

var height = $(window).height(); 

var width = $(window).width(); 

$('ul#fullscreen-slider li').css('height', height); 

$('ul#fullscreen-slider li').css('width', width); 

}; 


$(document).ready(function() { 
fitElements(); 
});

HTML：

<section id="home"> 
    <ul id="fullscreen-slider"> 
     <li><h1 class="cherry-red"><span>Slide 1</span></h1></li> 
     <li><h1 class="cherry-red"><span>slide 2</span></h1></li> 
     <li><h1 class="cherry-red"><span>slide 3</span></h1></li> 
     <li><h1 class="cherry-red"><span>slide 4</span></h1></li> 
     <li><h1 class="cherry-red"><span>slide 5 - when complete fade to slide 1</span></h1></li> 
    </ul> 
</section>

注：我想遠離使用重插件遠特別是當大多數人並不滿足背景重複行爲。

來源

2013-02-25 egr103

爲什麼你無法使用'$（ '選擇'）淡入（函數（）{$（本）.fadeOut（）;}）;'方法??使用javascript在一段時間內調用它。 – shashwat 2013-02-25 15:46:49

@ShashwatTripathi我是一個新手，當談到JS，所以我不知道如何去做這個... – egr103 2013-02-25 15:48:46

我不明白你想達到什麼樣的效果..'：/ ' 你希望所有的鋰都能每20秒立即滑出一次？ – Stphane 2013-02-25 15:50:42

JS功能

function slideshow() { 
    $('#fullscreen-slider li:gt(0)').hide(); 
    setInterval(function(){$('#fullscreen-slider :first-child').fadeOut().next('li').fadeIn().end().appendTo('#fullscreen-slider');}, 3000); 
}

至於CSS，加入position:relative;到UL，position:absolute; left:0; top:0;到LIS並添加了類與背景爲每個L1。

您需要更改的唯一的事情就是每個L1需要其類的背景，而不是使用第n個孩子，因爲這段代碼現在與李的組織搞亂，通過獲取剛剛褪去之一，並在最後追加再次（因此可見的將永遠是nth-child(0)）。

這是Jonathan Snook的Simplest jQuery Slideshow的微小修改版本。

這裏是我的jsfiddle http://jsfiddle.net/jRDkm/1/

來源

2013-02-25 16:25:27 RaphaelDDL

這看起來很好，謝謝，雖然它不會重複，當它得到到最後？它重複第一個裏，但然後淡出到白色背景，並停止？如何解決這個問題，使其不斷循環？ – egr103 2013-02-26 10:24:34

沒問題，選擇器是錯的。感謝您的代碼！在這裏看到正確的選擇器：http://jsfiddle.net/jRDkm/5/ – egr103 2013-02-27 13:40:40

我會創建一個函數來做到這一點，並使用setInterval調用它。

然後，當您加載所有頁面時，調用clearInterval函數停止閃爍。

http://jsfiddle.net/uWwfv/4/

function fadeBlinking() { 
    $('li').fadeOut(500, function() { 
     $(this).fadeIn(500); 
    }); 
} 

var intervalHandle = setInterval(function() { 
    fadeBlinking(); 
}, 20000); 

fadeBlinking(); 

$(document).ready(function() { 
    fitElements(); 

    //Stop blinking when your condition is met 
    clearInterval(intervalHandle) 
});

來源

2013-02-25 15:52:05 sdespont

感謝這一點，雖然jsFiddle不適合我？ – egr103 2013-02-25 15:55:44

這不是一個「即插即用」的代碼片段，但試試這一個：http://jsfiddle.net/uWwfv/4/ – sdespont 2013-02-25 15:57:01

在同一個地方淡入/淡出元素

回答

相關問題