JavaScriptによる自動スクロールにおける挙動（カクカクしたり、テキストがかぶったり）

Question

JavaScriptで縦にテキストが自動スクロールする機能を実装しているのですが、テキストの長さによって挙動が変化します。

具体的には下記のHTMLにあるように、最後のテキストが長い場合にだけ１回目のテキストとかぶったり、またFirefoxだと動きがカクカクしたりという挙動の変化です。

<div class="loopSlider" style="height: 100px;">
  <ul>
    <li>
      <a href="#">この１回目のテキストが２週目から挙動がおかしい。</a>
    </li>
    <li>
      <a href="#">こんにちは。今日は良い天気ですね。</a>
    </li>
    <li>
      <a href="#">この３回目のテキストが長い場合だけ、１回目のテキストにかぶって見えてしまう。たとえばこのように何行か続くくらい長い場合だけで、もし短ければかぶったりしない。</a>
    </li>
  </ul>
</div>

$(function(){
    var setElm = $('.loopSlider'),
    slideSpeed = 2000;
 
    setElm.each(function(){
        var self = $(this),
        selfHeight = self.innerHeight(),
        findUl = self.find('ul'),
        findLi = findUl.find('li'),
        listHeight = findLi.outerHeight(),
        listCount = findLi.length,
        loopHeight = listHeight * listCount;
 
        findUl.wrapAll('<div class="loopSliderWrap" />');
        var selfWrap = self.find('.loopSliderWrap');
 
        if(loopHeight > selfHeight){
            findUl.css({height:loopHeight}).clone().appendTo(selfWrap);
 
            selfWrap.css({height:loopHeight*2});
 
            function loopMove(){
                selfWrap.animate({top:'-' + (loopHeight) + 'px'},slideSpeed*listCount,'linear',function(){
                    selfWrap.css({top:'0'});
                    loopMove();
                });
            };
            loopMove();
 
            setElm.hover(function() {
                selfWrap.pause();
            }, function() {
                selfWrap.resume();
            });
        }
    });
});

.loopSlider {
    margin: 0 auto;
    text-align: left;
    position: relative;
    overflow: hidden;
    background: #242424;
    margin: 0 20px;
    border-radius: 2px;
    max-width: 250px;
}
.loopSliderWrap { 
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
}
ul {
    position: relative;
    padding: 5px;
}
li {
    margin: 0px 5px 5px 5px;
    padding-bottom: 5px;
}
a {
    color: #fff;
    text-decoration: none;
    display: block;
}

原因と対策についてご意見頂戴できればと思い質問させて頂きました。
宜しくお願い致します。

よろしければ実際の挙動のサンプルがあるのでご覧になって下さい。
https://jsfiddle.net/k9qez6Lh/

Answer 1

原因は、最初のリスト要素の高さ * リストの数でループ全体の長さを求めていることです。
そのため、最初のリスト要素より高さの高いリスト要素があると、ループ全体の長さよりもUL要素の高さの方が高くなってしまっています。

リスト要素が多くなるわけでないのなら、loopHeight = listHeight * listCount;の部分を loopHeight = findUl.outerHeight(); に書き換えるだけで直るでしょう。

カクカクする現象はすみません、手元の Nightly 版 Firefox では再現できませんでした。

---

ところで質問の趣旨とは異なると思いますが、setElm.hover(function(){ ... })の部分が setElm.each のコールバック内に入ってしまっているため、loopSliderクラスの要素を複数作ったときに意図しない動作になりそうですよ。

Comments

[ninjanin]

ああなるほど。ありがとうございます。
カクカクの方は他からCSSが原因だとご指摘頂きました。

Answer 2

R.Mizukami さんの回答にプラスして以下のスタイルを当てると2周目のずれがなくなります

ul {
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

Comments

[ninjanin]

悩んでいたのですがbox-sizingでしたか。ありがとうございます。

Answer 3

カクカクの原因は、
ループしてきたselfWrapのアニメーション完了時のtopの位置と、
loopMove()内でリセットしている位置selfWrap.css({top:'0'});が違う（ズレている）為だと思われます。

Comments

[ninjanin]

ありがとうございます。みなさんのおかげで解決いたしました。