2013-02-13 107 views
1

我有一个<div>中包含的单词列表,<div>溢出被设置为隐藏,因此一次只显示一个列表项。我希望每个列表项目能够逐个向上滑动,但不使用.slideUp()函数。我希望它看起来像一个在顶部移动,另一个从底部出现。我也希望列表项目循环。通过列表项的动画循环

这里是我的HTML:

<div class="band_ticker"> 
     <ul id="slide"> 
      <li><h2 class="band">BAND</h2></li> 
      <li><h2 class="band">PARTY BAND</h2></li> 
      <li><h2 class="band">COPORATE EVENTS</h2></li> 
      <li><h2 class="band">WEDDINGS</h2></li> 
      <li><h2 class="band">FUNCTION BAND</h2></li> 
      </ul> 
    </div> 

我能得到一些帮助,通过向上动画的每个项目通过写这些jQuery代码循环?

+0

这里溢出,我们没有为你写的代码。尽管如此,我们将帮助您找到一些插件。然后,在您编写了一些代码并出现问题后,我们会帮助您解决这些问题。这个问题太模糊,并要求我们为您编写代码。 – UpHelix 2013-02-13 18:13:37

+0

我有一些额外的功能,我想滚动顶部和底部与点击功能有同样的问题有什么办法。如果你能提供jsfiddle例子,它应该会更有帮助。 – Anup 2013-10-08 06:57:33

回答

6

下面是一些代码,最初是从workshop.rs:

JS:

function tick(){ 
    $('#ticker li:first').animate({'opacity':0}, 200, function() { 
    $(this).appendTo($('#ticker')).css('opacity', 1); }); 
} 
setInterval(function(){ tick() }, 4000); 

HTML:

在堆栈
<ul id="ticker"> 
    <li> 
     <a href="http://workshop.rs/2009/12/jqbargraph-jquery-graph-plugin/">jqBarGraph</a> is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. 
    </li> 
    <li> 
     Learn how to create <a href="http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/">image gallery in 4 lines of Jquery</a> 
    </li> 
    <li> 
     <a href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects">jqFancyTransitions</a> is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. 
    </li> 
    <li> 
     <a href="http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/">mooBarGraph</a> is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. 
    </li> 
</ul> 
+0

那正是我所追求的。感谢您的帮助 – 2013-02-13 19:05:19

+0

不客气。很高兴我能帮上忙! – UpHelix 2013-02-13 19:07:31

+0

我有一些额外的功能,我想滚动顶部和底部与点击功能有同样的问题有什么办法。如果你能提供jsfiddle例子,它应该会更有帮助。 – Anup 2013-10-08 06:57:12