当前情况：
我有一个divs列表，其中包含一组元素，这些元素会根据当前divs的数量自动滚动。此divs列表位于parent div内，且已固定height。
要求：
divs的长度小于4，请不要动画，即滚动。div，然后从下往上滚动，反之亦然。div的悬停滚动。取得：
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
});
任何帮助都非常感激。
答案 0 :(得分：1)
这是我能够理解的。
问题：
marqueePlay()时，它会尝试在animateTime变量中定义的时间内设置剩余距离的动画。距离减少，但时间重新应用。因此，你的动画似乎慢了一段时间然后恢复到正常速度。它看起来就是这样，但事实上，它的表现完全正确。建议的解决方案：
requestAnimationFrame API轻松实现。animate() jQuery方法，我们可以轻松暂停＆amp;使用简单的布尔标志 resume 我们的动画。以下是操作代码段或您是否有兴趣将其视为jsFiddle。
<强> 段：
// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var secDetails=$('#secDetails');
var container=secDetails.find('.container');
var eventsPartial=$('#events_partial');
var currTop=0;
var destTop=eventsPartial.height()-secDetails.height()-parseInt(eventsPartial.css('margin-top'));
var isPaused=false;
var isFirstLoop=true;
var speed=1;
if(container.length>=4&&container.length<9){
requestAnimFrame(render);
secDetails.hover(function(){isPaused=true;},function(){isPaused=false;});
currTop=destTop;
}
function render(){
requestAnimFrame(render);
if(!isPaused){
secDetails.css({transform:'translate3d(1px,'+roundDecimal(currTop,2)+'px,0px)'});
currTop+=!isFirstLoop?-speed:speed;
if(currTop>0) isFirstLoop=false;
if(currTop<=destTop) currTop=0;
}
}
function roundDecimal(value,place){ return Math.round(value*Math.pow(10,place))/Math.pow(10,place); }#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;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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 id="secDetails">
<div class="container">
<h3><strong> Program in Place 1 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 2 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 3 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 4 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 5 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 6 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 7 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
<div class="container">
<h3><strong> Program in Place 8 on 11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
</div>
</div>
</div>
</div>
如果有什么不清楚，请告诉我。
P.S。虽然个人而言，我不喜欢当它到达最底部时发生的突然跳跃然后再次显示第一个并再次开始动画。但我可以理解，这是你的场景中的一个要求，也许它只是适合这种方式。这是一种味道。如果我按照自己的方式，我会让它们像yoyo一样上下移动;）。
更新： 这是您的yoyo jsFiddle。还忘了提到你可以使用代码中的speed变量来控制动画的速度。希望这会有所帮助。