http://jsbin.com/uyawi/1879/edit
HTMLピースは
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="marquee"><p>My scrolling text is so freakin' COOL!!!111!</p><p>My scrolling text is so freakin' COOL!!!111!</p
<p>My scrolling text is so freakin' COOL!!!111!</p</div>
</body>
</html>
そしてここにjavascriptがあります
$(function() {
var marquee = $("#marquee");
marquee.css({"overflow": "hidden", "height": "100%"});
// wrap "My Text" with a span (IE doesn't like divs inline-block)
marquee.wrapInner("<span>");
marquee.find("span").css({ "height": "100%", "display": "inline-block", "text-align":"center" });
marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"
marquee.wrapInner("<div>");
marquee.find("div").css("height", "100%");
var reset = function() {
$(this).css("margin-top", "100%");
$(this).animate({ "margin-top": "-100%" }, 5000, 'linear', reset);
};
reset.call(marquee.find("div"));
});
実行中にしばらく停止してから再び実行されます。修正方法を知っていますか?