【发布时间】：2015-06-25 18:08:22
【问题描述】：
当前情景：
我有一个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 on 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 on 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 on 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 on 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 on 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 on 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 on 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 on 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
});
非常感谢任何帮助。
【问题讨论】：
标签： javascript jquery jquery-animate requestanimationframe