如何讓三裏子內容自動顯示並用jquery逐個隱藏？

-3

<div class="scroller"> 
      <ul class="header-contact"> 
      <li id="header-section1" class="sectionslide"><p>We offer FREE shipping</p><p>on orders of $50 or more!</p></li> 
      <li id="header-section2" class="sectionslide"><p>We ship your orders same day</p><p>&nbsp;&nbsp;&nbsp;if ordered before 2pm PST.</p></li> 
      <li id="header-section3" class="sectionslide"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Call Us: 1234</p><p>Our hours: Mon - Fri 10am-5pm</p></li> 
      </ul> 
      </div>

我想讓李內容自動顯示和隱藏一個接一個。對不起。我不知道如何設定時間來讓li內容顯示和隱藏。哪個事件我應該做？

來源

2011-11-08 dreamchaser

你有你自己嘗試新鮮事物？你有什麼模糊的想法，你想如何處理這種情況？如果是（要麼回答），請將它們包括在您的問題中以顯示*一些*努力。 – Matt

看看http://jquery.malsup.com/cycle/，例如http://jquery.malsup.com/cycle/nowrap2.html –

謝謝，但我想用代碼來做。 – dreamchaser

嘗試是這樣的（Demo）：

// starting a named function expression 
// the function name is only usable inside the function scope 
(function slide(wrapper, slides, idx, delay, duration) { 

    // delay an animation on the wrapper element 
    $(wrapper).delay(delay || 1000).animate({ 

    // moving the wrapper element upwards by the slide element top position 
    top: -$(slides).eq(idx || 0).position().top 

    // setting animation duration and anonymous callback function 
    }, duration || 1000, function() { 

    // calling slide recursively, but incrementing or resetting the 
    // passed slide element index 
    slide(wrapper, slides, idx < slides.length - 1 ? idx + 1 : 0, delay, duration); 
    }); 

// closing the function body and immediately call it, with parameters for 
// the wrapper element, 
// the slide elements, 
// the index to start with, 
// the animation delay and 
// the animation duration 
}($('.scroller > ul'), $('.scroller > ul > li'), 0, 1500, 500));

來源

2011-11-08 09:50:44 Yoshi

我很抱歉，我無法很好地跟蹤你的代碼。 document.ready（）函數在哪裏 – dreamchaser

沒有，您必須將該代碼放入您的ready函數中。 – Yoshi

我很抱歉，我仍然無法很好地遵循你的代碼。你可以用更多的細節來解釋它。非常感謝， – dreamchaser

var delay = 0; 
var interval = 1000; 

jQuery('.sectionslide').css('display','none'); 
jQuery('.header-contact li').each(function() { 


    jQuery(this).delay(delay).fadeIn(); 
    delay += interval; 


});

http://jsfiddle.net/nQAUH/

來源

2011-11-08 09:32:13 John

謝謝，效果不是我想要的，我想當拳頭李顯示，其餘都是隱藏，第二顯示，其餘全部隱藏 – dreamchaser

檢查http://jquery.malsup.com/cycle/ – John

謝謝你，但我想用代碼來做。它有一個簡單的方法來獲得它的一個小代碼？ – dreamchaser

我會用一個叫做循環插件，

，因爲這有很多的不同的效果，你還可以管理頁面，基本上很多bug的比你自己做並浪費大量時間來完成已經爲你做的事情。

http://jquery.malsup.com/cycle/

是演示，如果你需要幫助安裝。

來源

2011-11-08 09:44:05 Val