jquery - JQuery アニメーション UL リスト

Question

<style>
.myNewsSlider
{
width:200px;
height:44px;
overflow:hidden;
position:relative;
 }

 .myNewsList
 {
margin:0px; 
padding:0px;
position: absolute;
 }
</style>

<div class="myNewsSlider">
  <ul class="myNewsList">
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
  </ul>
</div>

リストを下から上に移動し、各要素を 5 秒間表示します。

最初の要素が 5 秒間表示されてから消え、2 番目の要素が 5 秒間表示されます。

Jquery を使用してこのタスクを完了するにはどうすればよいですか?

Answer 1

作業デモははるかに簡単です: http://jsfiddle.net/aLprr/

使用される API:

• .promise- http://api.jquery.com/promise/
• .delay- http://api.jquery.com/delay/
• .fadeOut- http://api.jquery.com/?ns0=1&s=.fadeOut&go=

それが原因に適合することを願っています:)

PS - 5000 の計算で遊んでください。

コード

$("document").ready(function() {
    $('ul li').each(function(index) {
        $(this).delay(4000 * index).fadeOut(500).promise(function() {
            $(this).remove();
        });
    });


});​

Answer 2

var p;
for(i=0;i<=3;i++){
  p=i*20;
  $('.myNewsList').animate({"margin-top":"-"+p+"px"},1000).delay(5000);
 }​

.myNewsSlider
 {
  width:200px;
  height:24px;
  overflow:hidden;
  position:relative;

}

デモ

Answer 3

これを行う簡単な方法は、

1]myNewsList のプロパティを に設定liしmargin-topます100%。

2]jqueryをanimatemyNewsListのlimargin-top0%

3]5 seconds遅延 についてはsetInterval()、5秒ごとにmyNewsListの最初のliを非表示にしてから、2番目を0％にli設定してアニメーション化する方法を使用できます。top-marginli