2011-11-08 11 views
-3

は次のとおりです。3つのコンテンツをjqueryで自動的に表示して非表示にするにはどうすればいいですか? htmlコードを想定し

<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> 

iは、Li含有量のオートショーを作り、一つ一つを非表示にします。ごめんなさい。私はどのようにliのコンテンツを表示し、非表示にする時間を設定するのか分からない。どのイベントをすべきか?

+2

は、あなたが何かを自分で試したことがありますか?どのように状況に近づきたいのか、あいまいなアイデアはありますか?はいの場合(いずれかの回答に)、質問に*いくつかの努力を表示してください。 – Matt

+0

http://jquery.malsup.com/cycle/で見てください。例http://jquery.malsup.com/cycle/nowrap2.html –

+0

ありがとうございますが、私はコードでやりたいと思います。 – dreamchaser

答えて

0

このような何か(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)); 
+0

申し訳ありませんが、あなたのコードをうまくフォローできません。どこにdocument.ready()関数がありますか – dreamchaser

+0

何もありません。準備が整った関数の中にそのコードを置かなければなりません。 – Yoshi

+0

申し訳ありませんが、私はまだあなたのコードをうまくいくことができません。もっと詳しく説明してください。多くのおかげで、 – dreamchaser

1
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/

+0

ありがとうございました、効果は私が望んでいない、私は拳リチウムが示すとき、残りはすべて隠れて、2番目のショーは、残りはすべて隠されている欲しい – dreamchaser

+0

チェックhttp://jquery.malsup.com/cycle/ – John

+0

ありがとうあなたが、私はコードでそれをやりたいちょっとしたコードで簡単に入手できますか? – dreamchaser

0

私はサイクルと呼ばれるプラグインを使用することになり、

これは、さまざまな効果がたくさんあります。また、ページ、 と基本的に管理することができますので、たくさんバグのない、それを自分で行うよりあなたのためにすでに行われていることのために多くの時間を無駄にしています。

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

あなたがそれをインストールする助けを必要とするかどうか、デモです。

関連する問題