Question

Supposed the html code is:

<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 want to make the li content auto show and hide one by one. i am sorry. i don’t know how to set the time duration to make the li content show and hide. which event i should do?

Answer 1

Try something like this (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));