我在http://jsfiddle.net/ULeuu/1/中提出了我的示例工作代码。问题是我试图使用jquery动画但滚动不顺畅。有没有办法让我能让div顺利滚动
答案 0 :(得分:4)
首先,通过将动画持续时间设置为setTimeout
来同步您的.animate()
和400
的持续时间,就像超时一样。
其次,使用linear
缓动来删除动画中的任何堆栈:
$("#slide").stop().animate({"left":leftVal + 177 + 'px'}, { "duration": 400, "easing": "linear" });
答案 1 :(得分:1)
而不是fast
在.animate
中提供一些值
$("#slide").stop().animate({"left":leftVal + 177 + 'px'},1000);
答案 2 :(得分:0)
目标是在悬停时连续滚动吗? 使用与动画时间相同的setInterval,使用线性缓动 - 使用jQuery 1.9.1
(function(){
var myObject = {
leftInt: '',
rightInt: '',
init: function(){
$this = this;
$(function(){
$this.eventListeners();
});
},
eventListeners: function(){
$('#prev').on("mouseenter", myObject.goLeft);
$('#prev').on("mouseleave", myObject.stopLeft);
$('#next').on("mouseenter", myObject.goRight);
$('#next').on("mouseleave", myObject.stopRight);
},
goLeft: function(){
myObject.leftInt = setInterval(myObject.slideLeft, 300);
},
goRight: function(){
myObject.rightInt = setInterval(myObject.slideRight, 300);
},
stopLeft: function(){
clearInterval(myObject.leftInt);
},
stopRight: function(){
clearInterval(myObject.rightInt);
},
slideLeft: function(){
$("#slide").stop(true, true).animate({"left":'+=20px'}, 300, 'linear');
},
slideRight: function(){
$("#slide").stop(true, true).animate({"left":'-=20px'}, 300, 'linear');
}
}
myObject.init();
})();