как заставить содержимое трех li автоматически отображаться и скрываться одно за другим с помощью jquery?

#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>amp;nbsp;amp;nbsp;amp;nbsp;if ordered before 2pm PST.</p></li>
            <li id="header-section3" class="sectionslide"><p>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;Call Us: 1234</p><p>Our hours: Mon - Fri 10am-5pm</p></li>
          </ul>
          </div>

я хочу, чтобы содержимое li автоматически отображалось и скрывалось одно за другим. прошу прощения. я не знаю, как установить продолжительность времени, чтобы содержимое li отображалось и скрывалось. какое событие я должен выполнить?

1. Вы сами что-нибудь пробовали? У вас есть какие-либо смутные идеи, как вы хотите подойти к ситуации? Если да (для любого ответа), включите их в свой вопрос, чтобы продемонстрировать некоторые усилия.

2. посмотрите на jquery.malsup.com/cycle , пример jquery.malsup.com/cycle/nowrap2.html

3. спасибо, но я хочу сделать это с помощью кода.

Ответ №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/

1. спасибо, я не хочу такого эффекта, я хочу, чтобы при первом отображении li все остальные были скрыты, при втором отображении все остальные были скрыты

2. спасибо, но я хочу сделать это с помощью кода. есть простой способ получить это с помощью небольшого кода?

3. Проверьте ответ @ Yoshi, это то, что вы хотите

Ответ №2:

Попробуйте что-то вроде этого (демо):

 // 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));

1. извините, я не могу хорошо следить за вашим кодом. где функция document.ready()

2. Такого нет, вам пришлось бы поместить этот код в вашу готовую функцию.

3. извините, я все еще плохо понимаю ваш код. не могли бы вы объяснить это более подробно. большое спасибо,

4. нет кода для вызова функции slide, почему она может запускаться?

5. Я добавил несколько подсказок по коду, надеюсь, это поможет. Если у вас возникли проблемы с пониманием того, почему работает функция, вам, вероятно, следует ознакомиться с javascript в целом. Хорошим началом было бы: developer.mozilla.org/en/JavaScript

Ответ №3:

Я бы использовал плагин под названием cycle,

потому что это имеет много разных эффектов, и вы также можете управлять страницами, и в основном без ошибок, чем делать это самостоятельно и тратить много времени на то, что уже сделано за вас.

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

это демо-версии, если вам понадобится помощь в их установке.