Question

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

我想让li内容自动显示并逐个隐藏。对不起。我不知道如何设置持续时间以使li内容显示和隐藏。我应该做哪个活动？

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

Answer 2

我会使用一个名为cycle的插件，

因为它有很多不同的效果，你也可以管理页面，并且基本上没有比自己做的更多的无错误，浪费了很多时间用于已经完成的事情。

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

是演示，如果您需要帮助安装它。

Answer 3

尝试这样的事情（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));

如何用jquery一个一个地制作三个li内容自动显示和隐藏？

3 个答案: