使用jquery编写完美动画的正确方法

当前场景：

我有一个divs的列表，它包含一组元素，这些元素根据存在的divs的数量自动滚动。该divs的列表被放置在parent div内并且具有固定的height。

要求：

• 如果内部存在的divs的长度小于4，则不要设置动画，即滚动
• 以相同的速度制作动画，直到最后一个div，并从下向上滚动，反之亦然
• 在任何子div悬停时停止滚动

已实现：

• 滚动完成，即如果存在少于4个元素，则不滚动
• 悬停任何子div时，滚动停止
• 动画制作到底部元素并从头开始

目前面临的问题：

• 滚动不会以相同的速度发生。它开始得很慢，速度加快，结束得很慢
• 悬停后停止滚动，当它再次启动时，它会再次缓慢启动
• 一旦到达终点，它会在那里停留几秒钟，然后从头开始

演示

HTML

<div id="events_partial" class="container body-content col-md-12 col-lg-12 set-max-height">
    <div class="row sec-container" id="secContainer">
        <div style="top: -550.242px; opacity: 1;" id="secDetails">
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
            <div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p>
                <p>
                  Program Description which is a very long text on document and it  can be more than 2 lines
                </p>
            </div>
      </div>
    </div>
</div>

CSS

#events_partial {
    min-height: 385px !important;
    margin-top: 57px;
    overflow: hidden;
}
.set-max-height {
    max-height: 385px !important;
    padding-top: 30px !important;
}
.sec-container {
    overflow: hidden !important;
    min-height: 200px;
}
#secDetails {
    position: absolute;
    margin-top: 0px;
}

JS

var animateTime = 50000; //kept varying time because as number of items increases the speed time decreased
var shouldAnimate = true;
if ($("#secDetails .container").length < 4) {
    shouldAnimate = false;
}
if ($("#secDetails .container").length >= 4 && $("#secDetails .container").length < 9)
    animateTime = 10000;
function marqueePlay() {
   if (shouldAnimate) {
       $("#secDetails").animate(
       {
            top: $("#events_partial").height() - $("#secDetails").height(),
            opacity: 1
       }, animateTime, function () {
             $("#secDetails").css("top", 1);
             $("#secDetails").css("opacity", 1);
             marqueePlay();
       });
    }
}
marqueePlay();
$("#secDetails").hover(function () {
    $(this).stop(); //Stop the animation when mouse in
},
function () {
    marqueePlay(); //Start the animation when mouse out
});

非常感谢您的帮助。