ゆっくりと自動で上に流れるニュースティッカー

Result

jQuery

$(document).ready(function() {
        var t = $("#ticker");
        //ラップする
        t.children().filter("h3").each(function() {
          var h = $(this),
            c = $("<div>");
          h.next().appendTo(c);
          h.prependTo(c);
          c.appendTo(t);
        });
        //スクロールバー非表示
        t.css("overflow", "hidden");
        function animator(currentItem) {
          var d = currentItem.height();
            duration = (d + parseInt(currentItem.css("marginBottom"))) / 0.025;
          //アイテムの処理
          currentItem.animate({ marginBottom: -d }, duration, "linear", function() {
            currentItem.appendTo(currentItem.parent()).css("marginBottom", 0);
            animator(currentItem.parent().children(":first"));
          }); 
        };
        //ティッカーアニメーション開始
        animator(t.children(":first"));
        //マウスセンサーをセット
        t.mouseenter(function() {
          //ストップ
          t.children().stop();
        });
        //マウスが外れた時の処理
        t.mouseleave(function() {
          animator(t.children(":first"));
        });
      });

css

#ticker { 
    width:180px; 
    height:300px; 
    border:1px solid #ccc; 
    overflow:auto; 
}
#ticker h3 { 
    font-size: 14px; 
    padding:0 10px 5px 10px; 
    background-color:#eee; 
    padding-top:10px; 
    border:1px solid #fff; 
    border-bottom:none; 
    border-right:none; 
    position:relative; 
}
#ticker div.text { 
    margin-left:0; 
    font-size: 11px ; 
    padding:0 10px 10px 10px; 
    border-bottom:1px solid #ccc; 
    background-color:#eee; 
    border-left:1px solid #fff; 
    position:relative; 
}
#ticker div.last { 
    border-bottom:1px solid #fff; 
}
#ticker div { margin-top:0; }

html

<div id="tickerContainer">
      <div id="ticker">
        <h3 class="heading">News title</h3><div class="text">text </div>
        <h3 class="heading">News title</h3><div class="text">text </div>
      </div>
    </div>

via

How to Create a Simple News Ticker