如何动画滑动顺利离开？

我有以下如何动画滑动顺利离开？

 $('.left_arrow').hover(function() { 
      $('.chart').stop().animate({ 
       left: "+=10" 
      }); 
     }, 
     function() { 
      $('.chart').stop(); 
     });

而且我想拥有它，当你将鼠标放在箭头自如移动.chart向左，右箭头它，它移动到右侧。我正在通过应用- left (-7500px is the max)将其移动到左侧，而0是最远的。

以上移动超过10，但它不会继续移动它。我怎样才能得到它，所以它一直在移动它。我用的是类似

 $('.left_arrow').hover(function() { 
      $('.chart').stop().animate({ 
       left: "-7500px" 
      }, 20000); 
     }, 
     function() { 
      $('.chart').stop(); 
     });

但问题是，如果我说-6500px在它需要20秒去1000的其余部分，对20秒去充分的距离。所以速度是偏斜的，我想要一个标准的增量。

来源

2014-11-06 Steven

难以完全理解没有一些工作的代码，但默认放宽'.animate （）'是'swing'。如果你想要一个“标准增量” - 将缓动类型改为“线性” – elzi 2014-11-06 20:51:43

我想将鼠标放在箭头上，并使用负左CSS属性向左移动div，但我希望它是增量，而不是基于剩余的距离。 – Steven 2014-11-06 20:53:33

我会提供一个aswer，一秒钟。 – elzi 2014-11-06 20:56:12

基本上你需要的是速率函数。当我创建我的旋转木马时，我遇到了同样的问题。

rate = distance/time

所以，你的速度是0.375

现在，所有你需要做的是找到的距离，你可以相应地调整你的时间。

time = distance/0.375

因此，它应该是这个样子：

$('.left_arrow').hover(function() { 
     var distance = /*Get Distance Remaining*/ 
     var sd = 7500; 
     var time = 20000; 
     var rate = sd/time; 
     var time = distance/rate 

     $('.chart').stop().animate({ 
      left: "-7500px" 
     }, time); 
    }, 
    function() { 
     $('.chart').stop(); 
    });

很显然，这将需要一些调整，以得到恰到好处。但是这个概念就在那里。

对于我的情况，因为我使用的是<ul>，因为它是一个旋转木马，这是我得到的距离的方式：

distance = Math.abs($ul.position().left);

来源

2014-11-06 21:01:00 Adjit

没有完全理解问题，但你可以递增/递减动画像这样：

$('.chart').stop().animate({ 
    "left": "+=100px" 
}, 250);

注意+=操作。

编辑：此答案只是部分正确。悬停时的动画行为不符合要求。试图解决。

来源

2014-11-06 20:57:48 elzi

我试过了，但它移动了100px，然后停下来。我如何让它继续下去？ – Steven 2014-11-06 21:00:35

嗯，它嵌套在'悬停'中，所以它只会在你悬停时执行。另外，尝试删除'.stop（）'方法并在其他地方执行/一次 – elzi 2014-11-06 21:01:37

如何动画滑动顺利离开？

回答

相关问题