Result
http://jsfiddle.net/kachibito/Bjsrf/embedded/result,js,css,html
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>