[英]Proper way to write a perfect animation using jquery
当前场景：
我有一个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
});
任何帮助，不胜感激。
这是我所能理解的。
问题：
marqueePlay()再次，它会尝试在动画中定义的时间内剩余距离animateTime变量。 距离减少了，但是时间重新应用了。 因此，您的动画似乎会慢一些时间，然后恢复正常速度。 看起来只是这样，但实际上，它的行为完全符合其应有的行为。 建议的解决方案：
requestAnimationFrame API轻松实现线性动画。 animate()方法，我们可以使用简单的布尔标志轻松地暂停和恢复动画。 以下是正在使用的代码段，或者您是否有兴趣将其查看为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>
让我知道是否有任何不清楚的地方。
PS尽管个人而言，我不喜欢它到达最底端然后再次显示第一个并开始动画的突然跳动。 但我可以理解，这是您的方案中的一个要求，也许正是如此。 这是一种味道。 如果我按自己的方式去做的话，我会希望它们像动画一样上下移动。
更新：这是您的yoyo jsFiddle 。 还忘了提及您可以使用代码中的speed变量来控制动画的speed 。 希望这可以帮助。
使用Jquery来停止css动画。 这样做的正确方法是什么？
[英]Using Jquery to stop css animation. What is the proper way to do this?
在Java Script Function中编写JQuery函数的正确方法是什么
[英]What is the proper way to write a JQuery function inside a Java Script Function
使用javascript / jquery从数据库格式化日期的正确方法
[英]Proper way to format date from database using javascript/jquery
<a>用Javascript / JQuery</a>替换` <a>`</a>的正确方法是<a>什么？</a>
[英]What's the proper way to replace `<a>` using Javascript/JQuery?
使用 jQuery 和 AJAX 进行长轮询的正确方法是什么
[英]What is the proper way of doing long polling using jQuery and AJAX
使用引导程序对图像进行居中和裁剪的正确方法是什么（如果需要，可以使用jquery）
[英]What is the proper way to center and crop an image using bootstrap (with jquery if needed)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.