假设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> if ordered before 2pm PST.</p></li>
<li id="header-section3" class="sectionslide"><p> Call Us: 1234</p><p>Our hours: Mon - Fri 10am-5pm</p></li>
</ul>
</div>
我想让li内容自动显示并逐个隐藏。对不起。我不知道如何设置持续时间以使li内容显示和隐藏。我应该做哪个活动?
答案 0 :(得分: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;
});
答案 1 :(得分:0)
我会使用一个名为cycle的插件,
因为它有很多不同的效果,你也可以管理页面, 并且基本上没有比自己做的更多的无错误,浪费了很多时间用于已经完成的事情。
http://jquery.malsup.com/cycle/
是演示,如果您需要帮助安装它。
答案 2 :(得分: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));